HTML Text Zentrieren Und Bild Zentrieren - Tnado SEO & AMP CMS

Letzte Aktualisierung : 01.08.2023 |   3 minuten lesezeit

Um ein HTML Text in allen Richtungen zu Zentrieren, benötigt man kaum aufwand. Denn mit CSS hast Du sehr gute Möglichkeiten dies in wenigen schritten zu erledigen. Wir werden hier aber nicht nur ein Text in einem HTML Tag Element schreiben sondern, mit dieser Lösung kannst Du nahe zu alles Zentrieren.

Hello

Wie zentriert man ein Text ?

Also Texte sind einfach zu zentrieren, denn dafür gibt es in CSS das Attribute text-align text-align: center; und diesen übergeben wir den wert center. Das ist die einfachste Methode um ein Text zu zentrieren, jedoch gibt es noch weitere Möglichkeiten. Dieser Text ist zentriert. Doch dies würde dein Text nicht in die Vertikale Richtung zentrieren sondern nur Horizontal.

Eine weitere Möglichkeit wäre Flexbox oder Grid zu nutzen. Mit Flexbox kannst du Elemente auf viele verschiedene Arten ausrichten. Um Text zu zentrieren, könnte sowohl justify-content als auch align-items auf center setzen:

// HTML CODE Open code Copy code 0 <div style="display:flex; justify-content:center; align-items:center; height:100vh;"> 1 <p>Dieser Text ist zentriert.</p> 2 </div> // HTML CODE Open code Copy code 0 <div style="display:grid; place-items:center; height:100vh;"> 1 <p>Dieser Text ist zentriert.</p> 2 </div>

Wie ein HTML Bild zentrieren ?

Ein HTML Bild kann man zentrieren zu einem wenn es im CSS angegeben ist: background-image: url("path/to/image");Dann könnte man auch im CSS mit der Hintergrund position das Bild zentrieren, was wie folgt aussehen könnte. background-position: center center; Wenn man will dass, das Bild sich richtig anpasst könnte man noch die Hintergrund Größe verändern. background-size: cover; Um ein Bild jedoch in einem div Element oder ähnliches platziert und komplett anpassen möchte, nutzt man WorkArounds oder auch andere Hilfsmittel. Hier eine Variante mit object-fit, dies Unterstützt jedoch nicht alle Browser.

// CSS CODE Open code Copy code 0 .image img { 1 2 width:100%; 3 height:100%; /* Für IE auto verwenden */ 4 object-fit:cover; 5 }

Eine andere Variante zum Zentrieren

Es gibt natürlich auch noch ältere Methoden ein Text mit display: table-cell und vertical-align:middle vertikal zentrieren oder auch andere Methoden. Wir benutzen jedoch hier die Position left top so wie transform und translate, mit dieser Lösung kann man nahe zu alles zentrieren.

// CSS CODE Open code Copy code 0 .element { 1 position:absolute; 2 left:50%; 3 top:50%; 4 width:100px; 5 height:100px; 6 background-color:#000; 7 transform:translate(-50%,-50%); 8 } 9 10 .element p { 11 position:absolute; 12 left:50%; 13 top:50%; 14 margin:0; 15 padding:0; 16 transform:translate(-50%,-50%); 17 color:#fff; 18 } // HTML CODE Open code Copy code 0 <div class="element"> 1 <p>Hello</p> 2 </div>

Das ist die Lösung von dem Beispiel oben, es funktioniert auch Cross-Browser, also in jeglichen Browsern. Wenn es dir geholfen hat freu ich mich über ein Kommentar oder ähnliches. Wenn dir dieser Artikel gefallen hat würde ich mich über einen Follow auf eines oder mehreren Sozialen Netzwerke freuen. Links zum teilen findest du weiter unten für diesen Artikel so wie das Kommentarfeld.

Anzeige