Designer-Logo
Designer-Logo
Überschrift Ausrichten von Elementen

Ausrichten von Elementen

Zum horizontalen Ausrichten von block-Elementen (wie <div>) benütze margin: auto; Gib dem Element eine Breite, dies wird verhindern das sich das Element ausdehnt im Container so weit es geht nach links und rechts. Wenn man ein Breite für das Element definiert , wird mit margin: auto; der verbleibende Leerraum gleichmässig aufgeteilt(links und rechts):
Überschrift Ausrichten von Elementen
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid dodgerblue;
padding: 10px;
}
</style>
</head>
<body>
<h2>Ausrichten eines Elementes</h2>
<p>Zum ausrichten eines block-Element (wie div) horizontal verwende margin: auto;</p>
<div class="center">
<p>Hallo Welt!</p>
</div>
</body>
</html>
Überschrift ausrichten von Text
Zum zentrieren von Text innerhalb eines Elementes verwende text-align: center;
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid orange;
}
</style>
</head>
<body>
<h2>Zentrieren von Text innerhalb eines Elementes</h2>
<div class="center">
<p>Dieser Text ist zentriert.</p>
</div>
</body>
</html>
Überschrift Ausrichten von Bildern
Zum zentrieren(ausrichten) eines Bildes machen sie ein block-Element daraus und setzen sie das linke und rechte margin auf auto:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Zentrieren von Bildern</h2>
<p>Zum zentrieren(ausrichten) eines Bildes machern sie ein block-Element daraus und setzen sie das linke und rechte margin auf auto:</p>
<img src="Bilder/Logo12.png" alt="Logo strassencoder.ch" style="width:10%">
</body>
</html>
Überschrift ausrichten rechts und links mit position
Eine Variante zum ausrichten von Elementen ist mit position: absolute;
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 50px;
width: 20%;
border: 3px solid orange;
padding: 10px;
}
</style>
</head>
<body>
<h2>Rechts ausgerichtetes <div> Element mit position: absolute;:</h2>
<p>Ein Beispiel eines rechts ausgerichteten Element mit der position Eigenschaft:</p>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit vulputate.</p>
</div>
</body>
</html>
Überschrift ausrichten rechts und links mit float
Eine andere Methode zum ausrichten ist mit der float Eigenschaft:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 200px;
border: 3px solid orange;
padding: 10px;
}
</style>
</head>
<body>
<h2>Ausrichten eines <div> Element rechts mit float</h2>
<p>Ein Beispiel wie man ein <div> Element rechts ausrichtet mit der float Eigenschaft:</p>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit vulputate.</p>
</div>
</body>
</html>
Überschrift ausrichten vertikal mit padding
Eine einfache Lösung zum ausrichten vertikal ist mit padding(oben und unten):
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 30px 0;
border: 3px solid black;
}
</style>
</head>
<body>
<h2>Zentrieren vertikal mit padding(oben und unten)</h2>
<p>In diesem Beispiel wird ein div-Element vertikal zentriert:</p>
<div class="center">
<p>Ich bin vertikal zentriert.</p>
</div>
</body>
</html>
Überschrift ausrichten vertikal mit line-height
Ein anderer Trick ist die line-height Eigenschaft mit einem Wert zu versehen der gleich ist wie der height-Wert.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 100px;
height: 100px;
border: 5px solid dodgerblue;
text-align: center;
}
/* wenn der Text mehrere Zeilen beinhaltet: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Zentrieren vertikal mit line-height</h2>
<p>In diesem Beispiel wird ein div-Element vertikal zentriert mit der line-height Eigenschaft:</p>
<div class="center">
<p>Ich bin vertikal und horizontal zentriert.</p>
</div>
</body>
</html>
Überschrift ausrichten vertikal mit position und transform
Wenn padding und line-height keine Optionen sind, eine weitere Lösung ist mit den position- und transform Eigenschaften.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 100px;
position: relative;
border: 3px solid orange;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Ausrichten mit den position- und transform-Eigenschaften</h2>
<p>Wenn padding und line-height keine Optionen sind, eine weitere Lösung ist mit den position- und transform Eigenschaften:</p>
<div class="center">
<p>Ich bin vertikal und horizontal zentriert.</p>
</div>
</body>
</html>
Überschrift ausrichten vertikal mit flexbox
Du kannst auch flexbox verwenden zum ausrichten(align).
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
border: 3px solid orange;
}
<style>
</head>
<body>
<h2>Mit Flexbox ausrichten</h2>
<p>Ein Container mit den beiden Eigenschaften justify-content und align-items wird die Items zentrieren (in beiden Achsen).</p>
<div class="center">
<p>Ich bin vertikal und horizontal zentriert.</p>
</div>
</body>
</html>
Designer-Logo