Hier ein kleiner Lehrgang wie man den Inhalt einer Seite immer zentriert in der Mitte darstellen kann, egal welche Bildschirmauflösung jemand gerade verwendet. Dabei werde ich euch eine Methode vorstellen die nur auf CSS basiert, und eine die mit Javascript und jQuery funktioniert. Mit diesem Code könnt ihr Divs garantiert immer zentriert in der Mitte darstellen lassen, egal ob der User nun Internet Explorer, Chrome, Firefox, Safari, Opera oder Mobile Browser auf Handys oder Tablets verwendet.
1. Div Horizontal in der Mitte nur mit CSS ausrichten
In diesem ersten Beispiel wird nur ein div horizontal in der Mitte dargestellt. Zur besseren Ansicht habe ich den Hintergrund rot gemacht. Wichtig ist hier das margin auto, es sorgt dafür, dass das div in der Mitte bleibt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Div Horizontal zentriert Demo</title>
<style type="text/css">
.DivHorizontal{
width:180px;
height:100px;
margin:0 auto;
background-color:red;
}
</style>
</head>
<body>
<div class="DivHorizontal">
<p>Horizontal zentriert mit CSS</p>
</div>
</body>
</html>
2. Div Horizontal und Vertikal in der Mitte zentrieren mit CSS
Im zweiten Beispiel wird ein Div genau in der Mitte des Browserfensters dargestellt, egal wie gross es ist. Wichtig hier ist das top und left 50%, damit wird die obere linke Ecke genau in der Mitte platziert und mit margin -50px und -90px wird dann genau die Hälfte der Breite und Höhe abgezogen so das es genau in der Mitte ist.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Div Horizontal und Vertikal zentriert Demo</title>
<style type="text/css">
.DivHorizontalVertikal{
width:180px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-50px 0 0 -90px;
background-color:red;
}
</style>
</head>
<body>
<div class="DivHorizontalVertikal">
<p>Horizontal und Vertikal zentriert mit CSS</p>
</div>
</body>
</html>
3. Div mit HTML5 jQuery Horizontal und Vertikal in der Mitte zentrieren
Im letzten Beispiel wird ein Div mittels jQuery horizontal und vertikal in der Mitte angeordnet.Dabei wird das div beim ersten Mal laden mit document ready und beim verkleinern oder vergrössern des Fensters neu platziert. Die Logik ist eigentlich die selbe wie bei den CSS Beispielen einfach mit Javascript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Div mit HTML5 jQuery Horizontal und Vertikal in der Mitte zentrieren</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style type="text/css">
.DivMitte {
background-color:red;
width:180px;
height:100px;
}
</style>
<script type="text/javascript">
jQuery.fn.centerElement = function() {
return this.each(function(){
jQuery(this).css({'position':'fixed','left': ((jQuery(window).width() - jQuery(this).outerWidth()) / 2) + jQuery(window).scrollLeft() + "px",'top':(($(window).height() - jQuery(this).outerHeight()) / 2) + jQuery(window).scrollTop() + "px"}).trigger('resize');
});
};
</script>
</head>
<body>
<div class="DivMitte">
<p>Div in der Mitte platziert mit jQuery</p>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".DivMitte").centerElement();
});
$(window).resize(function () {
jQuery(".DivMitte").centerElement();
});
</script>
</body>
</html>
Ich hoffe dieses Tutorial hat euch gefallen und war nützlich für euch.
Viel spass beim ausprobieren!
