HTML Text zentrieren und Bild zentrieren

Letzte Aktualisierung : |  

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, den dafür gibt es in CSS das Attribute text-align text-align: center; und diesen übergeben wir den wert center.

So wir der Text mit dem Befehl in die Zentrierte Lage gebracht.


Doch dies würde dein Text nicht in die Vertikale Richtung zentrieren sondern nur Horizontal.



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
     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
       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
         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.

        Anzeige

        Dein Kommentar

        * Diese Felder sind erforderlich, E-Mails werden nicht veröffentlicht
        ?

        Dieses Feld ist optional
        Fülle dieses Feld aus und verbinde Dein Namen mit Deiner Website.

        Die in dieses Kontaktformular eingegebenen Daten werden in unserem System gespeichert, um die Ausgabe des Kommentars sicherzustellen. Ihre E-Mail-Adresse wird gespeichert, um die Anzahl der Kommentare und die zukünftige Registrierung zu bestimmen

        Ich habe gelesen die Datenschutzbestimmungen und Nutzungsbedingungen. Ich bestätige die Übermittlung des Formulars und die Übermittlung meiner Daten.
        tnado © 2019 | Alle Rechte Vorbehalten
        In Zusammenarbeit mit Hyperly