PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
L

Website centreren met margin: 0 auto; werkt niet

Door Louis Deconinck op 22-02-2016 10:46
4.271 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>
J Jan de Laet
22-02-2016 11:00
Moet je container dan ook niet een width meekrijgen?
L Louis Deconinck
22-02-2016 11:11
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?
J Jan de Laet
22-02-2016 12:04
Je kunt dit eens proberen bij container:

position: absolute;
left: 25%;

Omdat links en rechts niet even groot zijn, komt het niet helemaal in het midden.
Y Yoop Overmaat
22-02-2016 13:03
Een width is bij het centreren altijd nodig met een margin-left/right: auto; Een element een height meegeven zou ik doen omdat de weergave van het geheel in sommige gevallen er nogal krom uit komt te zien.

j j opla
10-04-2016 23:06
Volgens mij zou het zo ook moeten lukken, maar binnen de container moet dan wel een keer de width duidelijk worden.

#container{
	margin: 0;
	padding: 0;
/*	width: 965px;*/
/*	height: 638px;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
Thomas van den Heuvel
11-04-2016 00:34
@jopla, daarmee haal je je container uit de "flow", zou ik niet doen
@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
j j opla
11-04-2016 00:38
@Thomas
In de hoogte centreren ... brand los, want ik heb nog niet veel werkends gevonden ... eigenlijk alleen deze methode werkt bij mij.
Thomas van den Heuvel
11-04-2016 13:51
@jopla: mja, dat is hetzelfde als in de breedte centreren in zekere zin he, daarvoor heb je een vaste dimensie nodig voor zover ik weet (ben geen CSS expert). Het hangt er ook vanaf wat je probeert te centreren. In dit geval had ik het meer over de hoofdlayout/het contentgedeelte van een website. Het lijkt mij onverstandig om deze op voorhand vast te pinnen op een vaste hoogte, omdat simpelweg niet vaststaat hoeveel ruimte je (dynamische) content gaat innemen. Tenzij je misschien alles vastschroeft in voorgedefinieerde dimensies...

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 j opla
11-04-2016 15:13
@Thomas
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 ...

Reageren

Inloggen om te reageren