Website centreren met margin: 0 auto; werkt niet

Door Louis Deconinck op 22-02-2016 10:46

4.269 views

Ik probeer mijn website te centreren door in de container te werken met de margins, maar dit lukt niet. Hoe pak ik dit wel aan?


<!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>

Thomas van den Heuvel

11-04-2016 15:40

Het lijkt mij nogal lastig om hier een universeel recept voor te geven, dit hangt van je content af. Op het moment dat je werkt met vaste afmetingen plaats je ook restricties op de content zelf, deze kan niet langer elk willekeurig uiterlijk hebben maar moet dan gaan voldoen aan zekere kenmerken. Je zult ergens een keuze moeten maken.

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 :/.

Mary Grooteman

30-05-2016 11:18

Verticaal centeren doe ik meestal met
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;
}

Reageren

Inloggen om te reageren