Website centreren met margin: 0 auto; werkt niet
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html>
<head>
<title>Mijn topboeken</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
font-family: 'Open Sans', sans-serif;
}
#container {
margin-left:auto;
margin-right:auto;
}
h1 {
font-family: 'Oswald', sans-serif;
font-size: 80px;
}
h2 {
margin-top: -40px;
}
.titelboek {
border-top: 2px solid black;
text-transform: uppercase;
font-size: 18px;
}
.auteur {
font-size: 12px;
}
.ranking {
font-family: 'Oswald', sans-serif;
background-color: black;
color: white;
height: 30px;
width: 30px;
border-radius: 15px;
text-align: center;
line-height: 30px;
white-space: nowrap;
}
#links {
float:left;
text-align: right;
border-right: 10px solid black;
padding-right: 20px;
}
#rechts {
padding-top: 175px;
text-align: left;
float: left;
padding-left: 20px;
}
.item {
height: 350px;
margin-top: 13px;
}
#links .ranking {
float: right;
margin-right: -40px;
margin-top: -15px;
}
#rechts .ranking {
float: left;
margin-left: -40px;
margin-top: -15px;
}
hr {
margin-top: -2px;
border: 0;
background: black;
width: 10px;
height: 2px;
}
#links hr {
float:right;
margin-right:-10px;
}
#rechts hr {
float:left;
margin-left:-10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Topboeken</h1>
<h2>- mijn top -</h2>
<div id="tijdlijn">
<div id="links">
<div class="item">
<div class="ranking">1</div>
<hr>
<span class="titelboek">Hoe word ik een speedboot?</span>
<div class="auteur">Menno Lanting</div>
<div class="cover"><img src="https://i.mgtbk.nl/boeken/9789047008897-240x300.jpg" height="300" /></div>
</div>
<div class="item">
<div class="ranking">3</div>
<hr>
<span class="titelboek">Nooit af</span>
<div class="auteur">Martijn Aslander & Erwin Witteveen</div>
<div class="cover"><img src="https://i.mgtbk.nl/boeken/9789047009139-240x300.jpg?_=MAa8omBZ" height="300" /></div>
</div>
</div>
<div id="rechts">
<div class="item">
<div class="ranking">2</div>
<hr>
<span class="titelboek">IK</span>
<div class="auteur">Margriet Sitskoorn</div>
<div class="cover"><img src="https://i.mgtbk.nl/boeken/9789462760356-240x300.jpg?_=BbXcTU8l" height="300" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Mijn topboeken</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
font-family: 'Open Sans', sans-serif;
}
#container {
margin-left:auto;
margin-right:auto;
}
h1 {
font-family: 'Oswald', sans-serif;
font-size: 80px;
}
h2 {
margin-top: -40px;
}
.titelboek {
border-top: 2px solid black;
text-transform: uppercase;
font-size: 18px;
}
.auteur {
font-size: 12px;
}
.ranking {
font-family: 'Oswald', sans-serif;
background-color: black;
color: white;
height: 30px;
width: 30px;
border-radius: 15px;
text-align: center;
line-height: 30px;
white-space: nowrap;
}
#links {
float:left;
text-align: right;
border-right: 10px solid black;
padding-right: 20px;
}
#rechts {
padding-top: 175px;
text-align: left;
float: left;
padding-left: 20px;
}
.item {
height: 350px;
margin-top: 13px;
}
#links .ranking {
float: right;
margin-right: -40px;
margin-top: -15px;
}
#rechts .ranking {
float: left;
margin-left: -40px;
margin-top: -15px;
}
hr {
margin-top: -2px;
border: 0;
background: black;
width: 10px;
height: 2px;
}
#links hr {
float:right;
margin-right:-10px;
}
#rechts hr {
float:left;
margin-left:-10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Topboeken</h1>
<h2>- mijn top -</h2>
<div id="tijdlijn">
<div id="links">
<div class="item">
<div class="ranking">1</div>
<hr>
<span class="titelboek">Hoe word ik een speedboot?</span>
<div class="auteur">Menno Lanting</div>
<div class="cover"><img src="https://i.mgtbk.nl/boeken/9789047008897-240x300.jpg" height="300" /></div>
</div>
<div class="item">
<div class="ranking">3</div>
<hr>
<span class="titelboek">Nooit af</span>
<div class="auteur">Martijn Aslander & Erwin Witteveen</div>
<div class="cover"><img src="https://i.mgtbk.nl/boeken/9789047009139-240x300.jpg?_=MAa8omBZ" height="300" /></div>
</div>
</div>
<div id="rechts">
<div class="item">
<div class="ranking">2</div>
<hr>
<span class="titelboek">IK</span>
<div class="auteur">Margriet Sitskoorn</div>
<div class="cover"><img src="https://i.mgtbk.nl/boeken/9789462760356-240x300.jpg?_=BbXcTU8l" height="300" /></div>
</div>
</div>
</div>
</div>
</body>
</html>
Jan de Laet op 22/02/2016 11:00:54:
Moet je container dan ook niet een width meekrijgen?
Das misschien wel waar, maar die width weet ik niet op voorhand, aangezien dat afhankelijk is van de images. Bestaat er nog een andere manier om te centreren?
position: absolute;
left: 25%;
Omdat links en rechts niet even groot zijn, komt het niet helemaal in het midden.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
#container{
margin: 0;
padding: 0;
/* width: 965px;*/
/* height: 638px;*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
margin: 0;
padding: 0;
/* width: 965px;*/
/* height: 638px;*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@yoop, vaste hoogte snijd je je vaak mee in de vingers, met name bij dynamische websites/content, er zijn nettere/handigere oplossingen om dingen met hoogtes op te lossen, is wat meer moeite, maar dan heb je ook wat
In de hoogte centreren ... brand los, want ik heb nog niet veel werkends gevonden ... eigenlijk alleen deze methode werkt bij mij.
Op het moment dat je allerlei kunstgrepen moet gaan uithalen om een bepaald effect te bereiken is voor mij in ieder geval het moment om ofwel:
- te kijken of er nog een simpelere (semi-alternatieve) aanpak is, of gewoon
- het ontwerp te heroverwegen
Houd dingen gewoon simpel.
J opla op 11/04/2016 00:38:11:
@Thomas
In de hoogte centreren ... brand los, want ik heb nog niet veel werkends gevonden ...
In de hoogte centreren ... brand los, want ik heb nog niet veel werkends gevonden ...
https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
Voor de hoogte is dit volgens mij de enige methode die werkt als je een vlak in het midden van het scherm terecht wilt laten komen. Ja, voor een mobieltje zal je het niet gebruiken, maar om iets mooi weer te geven op een ouderwets 1280x1024 scherm best mooi en handig.
Maar als je een betere methode hebt voor vertikaal centreren op de schermhoogte dan hoor ik het graag.
En ja, als het niet kan zoals het moet, dan moet het maar zoals het kan ...
Kijk of de methode die @Ward voorstelt voor jou werkt, verzin een oplossing per specifiek geval, maak er een afbeelding van desnoods, of herzie je benadering en aanpak.
Of reken alles dynamisch uit met JavaScript lol.
Back on topic: @Louis als je afbeeldingen een probleem vormen overweeg dan het weergeven van thumbnails en als je hier op klikt krijg je een afbeelding op de oorspronkelijke grootte te zien. Via lightbox, popup of wat dan ook. Zoek in ieder geval een alternatieve oplossing voor dit specifieke probleem.
Wat je ook kunt doen is de afbeeldingen enkel een breedte geven die past, de verhouding van de afbeelding blijft dan behouden. Weet alleen niet of dat een nette oplossing is. Daarnaast lijkt het mij een verspilling van bandbreedte. Je laadt een fullblown afbeelding in en je geeft een postzegel weer :/.
position: absolute;
width: 100%;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
of als je het helemaal in het midden wilt hebben geef je de breedte een percentage van bv 60% en transform: translate(-50%, -50%)
Of..flexbox, dat is helemaal superhandig en dat wordt steeds beter ondersteund!
.fleks{
-ms-box-orient: horizontal;
-ms-display: flex;
-webkit-display: flex;
display: -webkit-flex;
display: -ms-flexbox;/*IE10!*/
display: flex;
display: flexbox;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
margin: 0;
/*dit hieronder centreert verticaal*/
-webkit-align-items: center;
align-items: center;
}