horizontale und vertikale zentrierung eines webinhaltes

[ geschrieben am 15.11.2011 in blog: der maschinist | tags: #, #, #, #, # ]

der einfachste weg, eine website kompatibel zu den meisten bildschirmauflösungen zu machen, ist, für den content eine feste größe zu definieren und ihn in der bildschirmmitte zu zentrieren – ist ein bildschirm größer als die definierte größe, dann zeichnet der browser automatisch einen rahmen in der hintergrundfarbe um den inhalt.

früher habe ich das mit einem tabellenkonstrukt (3 zeilen, 3 spalten) gelöst, bei dem die zellengrößen variabel (prozentual) definiert und ohne inhalt waren und die zentrale tabellenzelle durch dessen inhalt "aufgeblasen" wurde.

leider weiß ich gar nicht mehr, wo genau ich diesen ansatz "geklaut" habe, jedoch löse ich das ganze nur noch mit <div> containern:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Zentrierter Content</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}
			#container {
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				position: fixed;
				display: table;
			}
			#zentriert {
				text-align: center;
				display: table-cell;
				vertical-align: middle;
			}
			.clearfix:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			.clearfix {display: inline-block;}
			/* Hides from IE-mac */
			* html .clearfix {height: 1%;}
			.clearfix {display: block;}
			/* End hide from IE-mac */
		</style>
	</head>
	<body>
		<div id="container">
			<div id="zentriert">
				<div class="clearfix">
					Zentrierter Content
				</div>
			</div>
		</div>
	</body>
</html>

andere lösungsansätze:

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.