Centrerad Box med DIV taggen

Hur placerar man en DIV box i mitten på sidan utan CENTER- och TABLE taggen utan eller minimalt med CSS quirks?

Exempel 1

Gammal modell med centrerad tabell som ger symmetriska marginaler till höger och vänster och som anpassar sig efter webbläsarfönstrets bredd.

Innehållsbox

HTML Syntax:

<center>
<table width="604">

    <tbody>
        <tr>
            <td>Innehållsbox</td>
        </tr>
    </tbody>

</table>
</center>

Kommentarer:

Tabellens bredd styrs av width attributet (pixlelmått). Normalläget för den vertikala placeringen för TD är i mitten.

Exempel 2

Samma utseende och funktion men med DIV taggen i stället.

Innehållsbox

HTML Syntax (svårare än så här är det inte):

<div style="width: 604px; margin-left: auto; margin-right: auto;">
Innehållsbox
</div>

Kommentarer:

Normalt sett fyller DIV taggen ut bredden till 100%. Genom att begränsa bredden till ett bestämt pixelmått och automatiska marginaler till höger och vänster så hamnar boxen i mitten på sidan, således behovet av CENTER och TABLE-taggen försvinner med detta enkla exempel.

Placera innehåll centrerat och i mitten på sidan

Att placera innehåll i mitten i vertikal led är inte lika enkelt då det funnits ett starkt motstånd att tillåta specificering av höjd attribut i CSS modellen. Innehållet måste kunna flöda åt något håll och det naturliga är att specificera bredd men låta höjden styras dynamiskt i mån av plats. Designmässigt är det en stor brist att inte kunna placera saker centrerat i mitten. Att kunna specificera marginaler åt alla håll kan vara viktigt av estetiska skäl. Det är inte så snyggt att placera en ensam bild eller ett område med lite innehåll högst upp på sidan.

Exempel 3

Innehållsbox

Visa exempel

HTML Syntax:

<!DOCTYPE html>
<html>
<head>
	<title>Centrerad Boxmodell</title>
	<style type="text/css"><!--
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
		}
		.container {
			width: 950px;
			min-height: 100%;
			height: 100%;
			margin-left: auto;
			margin-right: auto;
			border-left: 1px #ccc dashed;
			border-right: 1px #ccc dashed;
		}
		.placer {
			display: table;
			position: absolute;
			width: 950px;
			height: 100%;
			top: 0;
			bottom: 0;
			left: auto;
			right: auto;
			text-align: center;
		}
		.middler {
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		.contentWrapper {
			text-align: left;
			margin-left: auto;
			margin-right: auto;
			width: 256px;
		}
	--></style>	
	
	<!--[if IE 6]>
	<style type="text/css">
	.placer {position:relative;top:50%;}
	.middler{position:relative;top:-25%;}
	</style>
	<![endif]-->
	<!--[if IE 7]>
	<style type="text/css">
	.placer {position:relative;top:50%;}
	.middler{position:relative;top:-25%;}
	</style>
	<![endif]-->

</head>
<body>

<div class="container">
	<div class="placer">
		<div class="middler">
			<div class="contentWrapper">
				<img src="gradient.png" width="256" height="256" alt="Bild" />
				<p>Centrerat innehåll placerad i mitten på sidan.</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Kommentarer:

Tyvärr blir det här inte lika enkelt som i Exempel 2 då DIV taggen inte i sig vill placera innehåll mitten så som tabellceller kan göra. Knepet är att använda sig av CSS tabell-attribut för DIV-taggen, "display: table;" för den yttre och "display: table-cell;" för den inre, då funkar plötsligt vertical-align attributet. Det är just det här som kan vara lite frustrerande vid användande av DIV som ersättning för tabeller. Till skillnad från dom tidigare exemplen behövs även lite trix för att få det att fungera även i äldre webbläsare då MSIE 6 (MSIE = Microsoft Internet Explorer) och 7 inte förstår "display: table;" attributet. Ovanstående exempel funkar dock utmärkt utan trix i MSIE 8 och 9.

Exempel 4

I modernare läsare så finns det attribut där man kan få <div> att bete sig på samma sätt som <table> och <td>. Det är så här enkelt man skulle önska att det var i Exempel 3 men vill ändock visa detta som ett rent och eget exempel då detta egentligen är lösningen på hela problemet.

Nycklen till detta är:

display: table; display: table-cell;

Notera att detta inte är kompatibelt med äldre Internet Exporer som inte förstår display:table och display:table-cell. Då behövs trix som visas i Exempel 3.

<!DOCTYPE html>
<html>
<head>
    <title>Centrerad Boxmodell</title>
    <style type="text/css"><!--
        html, body {margin:0; padding:0;height: 100%;}
        body {
            background-color: #fff;
            color: #000;
            font: 12px sans-serif;
        }
        .divTable {
            display: table;
            width: 100%;
            height:100%;
        }
        .divTd {
            display: table-cell;
            vertical-align: middle;
            text-align:center;
        }
        .content { /* mest för att göra saker synliga */
            height: 256px;
            width: 256px;
            padding: 16px;
            border:1px solid #fc0;
            background-color: #303030;
            color: #fc0;            
            font-size: 14px;
            margin: 0 auto;
        }
    -->
    </style>    
</head>
<body>
<div class="divTable">
    <div class="divTd">
        <div class="content">
            <p>Den här DIV boxen är placerad
            <br /><span class="stor">centrerat i mitten</span></p>
        </div>
    </div>
</div>
</body>
</html>

Se exempel på detta

Fler exempel på centrerad box i mitten på sidan

<!DOCTYPE html>
<html>
<head>
	<title>HEAP • Centrerad Boxmodell</title>
	<style type="text/css"><!--
		html, body {
			margin: 0;
			height: 100%;
		}
		.mittplacer {
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 1px;
			overflow: visible;
			visibility: visible;
			display: block;
			background-color: #ccc;
			text-align: center;
		}
		.textblock {
			margin-left: -128px;
			position: absolute;
			top: -64px;
			left: 50%;
			width: 256px;
			height: 128px;
			line-height: 96px;
			display: table;
			visibility: visible;
		}
		.content {
			height: 96px;
			padding: 16px;
			line-height: 18px;
			display: table-cell;
			vertical-align: middle;
		}
	--></style>
</head>
<body>
<div class="mittplacer">
	<div class="textblock">
		<div class="content">Mitten och centrerat på sidan</div>
	</div>
</div>
</body>
</html>

Se exempel

Kommentarer:

I och med att box-storleken är bestämd 256x128px så gör det saken lättare att placera den på sidan. Att bara placera en enkel textrad i mitten och centrerad är ännu enklare.

Se exempel

HTML Syntax:

<!DOCTYPE html>
<html>
<head>
	<title>HEAP • Centrerad Boxmodell</title>
	<style type="text/css"><!--
		html, body {
			margin: 0;
			height: 100%;
		}
		div.supersimple {
			position: absolute;
			top: 50%;
			width: 100%;
			margin-top: -32px; /* kompensera för texthöjd */
			text-align: center;
			font-size: 62px;
			vertical-align: middle;			
		}
	--></style>
</head>
<body>
<div class="supersimple">Apsvansade analfabeter</div>
</body>
</html>

Kommentarer:

Fler rader skulle skapa problem då jag i detta exempel kompenserar -32px uppåt för att texten som är 64px ska hamna i mitten. Dessa två exempel fungerar utan specifika MSIE problem.

Slutsats

Personligen tycker jag att det lätt kan bli rörigt med för mycket CCS trix och ogillar att behöva kompensera för ett inneboende problem med CSS standarden att den inte -på ett självklart sätt- tillåter positionering i vertikal led. Dessa trix är inte alltid helt pålitliga och jag rekommenderar att testa i så många webbläsare som möjligt.

Exempel på denna sida är testade i följande webbläsare:

Internet Explorer 6 (IE 6)
Internet Explorer 7 (IE 7)
Internet Explorer 8 (IE 8)
Internet Explorer 9 (IE 9)
Firefox 3.6 - 19
Google Chrome 12 - 19
Safari 5

Länkar

Det finns gott om sidor som försöker adressera dessa problem, mer eller mindre enkla och pålitliga.

Denna sida visar hur enkelt det borde vara, dock inte kompatibel med äldre MSIE
http://www.w3.org/Style/Examples/007/center.en.html

Här är en annan ganska enkel sida med CSS trix som adresserar kompabilitets problemet
http://pmob.co.uk/pob/hoz-vert-center.htm

|•|

"Enkel Box Modell", Hans E Andersson: 2011-10-06 14:13:04, ändrad: 2015-02-22 23:03:37