HTML & CSSur HTML, XHTML & CSS
14 svar · 558 visningar · startad av SDCd
Har nu skrotat runt här och letat efter ett bra sätt att centrera <div> på en sida med hjälp av css. Har dock inte hittat nån glasklar förklaring. Finns det nåt vettigt sätt (enligt gällande standard)?
Du får använda dig av javascript, sök i javascript dhtml forumet för fler trådar, sök på centrera div samt centrera lager
Jo, jag har sett de inläggen. Dock kan det ju vara så att javascript är avslaget.
Trodde att det fanns nån annan väg att gå eftersom tabeller är tänkt för att presentera text i just tabellform.
Om nu tanken är att lägga all layout i css, hur kan det komma sig att en sån enkel sak som att centrera inte finns? Och då menar jag inte centrera text i detta fall.
På denna sidan använder de text-align.
http://www.w3.org/Style/Examples/007/figures.html
<div style="text-align: center;">
innehåll
....
....
....
</div>
Jo jag gjorde provade på det sättet, men det är ju ett textlayout attribut enligt css.
Annars kan du prova med detta (borde vara det korrekta enligt standard):
<div style="width:100px; margin:auto">
Eller om du vill använda lite gammal html:
<div align="center">
Varför inte bara köra med { margin-left: 33%; margin-right: 33% }? Nackdelen är att bredden på blocket inte kan ställas in med annat än procent.
Det fungerar i detta fall att lösa med text-align, dock inte snyggt.
Nån som har en bra länk som förklarar tankesättet bakom positionering med hjälp av css.
Tex om jag har en <div>...</div> som är 90% hög 80% bred. Denna vill jag centrera på sidan och i den vill jag ha en centrerad tabell.
Jag hade lagt tabellen i en tabell och satt kolumnen i den yttre tabellen till 98% och innehållet centrerat.
Och hur centrerar du den första tabellen med hjälp av css?
Fulkod med tabeller som funkar på IE6, Mozilla och Opera 6. För NN4 kräver det lite mer arbete. Troligtvis får man sätta några width, height eller align med html-kod.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
<!--
body {
height:100%;
text-align:center;
padding:0px;
margin:0px;
}
.outer {
width:100%;
height:100%;
text-align:center;
}
.inner {
width:90%;
height:80%;
margin:auto;
border:1px solid black;
text-align:center;
}
.content {
border:1px solid blue;
margin:auto;
width: 300px;
height:200px;
}
-->
</style>
</head>
<body>
<table class="outer"><tr><td>
<table class="inner"><tr><td>
<table class="content">
<tr>
<td>Innehåll</td>
</tr>
</table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</body>
</html>
Kommer inte att valideras hos w3c då height på body (åtminstone inte i procent) inte är enligt standard.
Är det korrekt att använda text-align för att centrera tabeller?
Som jag har förstått det så är det mest "korrekta" sättet för att centrera en tabell med CSS, att använda margin:auto. Detta kommer dock inte att fungera i IE utan där får man använda text-align:center, som inte kommer att funka för centrering hos Mozilla. Man måste därför använda bägge två:
<body style="text-align:center">
<table style="width:400px; margin:auto">
<tr>
<td style="text-align:left">
Innehåll
</td></tr></table>
</body>
Dock kommer det att validera hos w3c.
Tack för det klargörande svaret. Kommer säkert fler frågor :)
Lägger in en länk till en sida som rätade ut flera frågetecken för mig: http://www.alistapart.com/stories/practicalcss/