Text in CSS vertikal ausrichten

Lesezeit: 6 Minuten

Benutzer-Avatar
ryyst

Ich habe welche Ja wirklich grundlegendes HTML & CSS:

header {
  vertical-align: middle;
  height: 60px;
  background-color: #00F;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" media="all" href="https://stackoverflow.com/questions/5442226/stylesheet.css">
  <title>Hello, World!</title>
</head>
<body>
  <header>
    Hello<sup>World</sup>
  </header>
</body>
</html>

Aber der Text wird nicht in der Mitte ausgerichtet. Warum nicht?

Benutzer-Avatar
clairesuzy

Das vertical-align Eigentum gilt nur für:

Inline-Level- und ‘Table-Cell’-Elemente

Sehen dieser Link.

Du könntest benutzen line-height Um den Text vertikal zu zentrieren, machen Sie ihn einfach größer als der eigentliche font-sizeist jedoch nur wirksam, wenn sich der Text über eine einzelne Zeile erstreckt.

Alternativ könntest du hinzufügen padding an der Ober- und Unterseite der header Element durch gleiche Werte.

Bearbeitet gemäß Kommentar: die offensichtliche Lösung bei Verwendung von HTML5 header Element wäre, es zu machen display: table-cell; Anstelle des Standardblocks, von dem ich denke, dass die zurückgesetzten CSS gelten.

  • Ich werde jedoch viel mehr in den Header packen (denken Sie an Navigation, Suche usw.). Muss ich den Text in einem separaten Container ablegen?

    – ryyst

    26. März 2011 um 12:19 Uhr


  • Nein, Sie sollten kein separates Div/Container benötigen, füllen Sie einfach den Header gleichmäßig oben und unten auf

    – clairesuzy

    26. März 2011 um 12:20 Uhr


  • @clairesuzy: Das ergibt keinen Sinn. Stellen Sie sich vor, ich hätte unterschiedlich große Texte in der Kopfzeile und wollte diese mittig ausrichten. Das könnte ich mit Polstern nie erreichen, oder?

    – ryyst

    26. März 2011 um 12:24 Uhr

  • ja sorry für die verwirrung – du füllst das auf header selbst, das Szenario, das Sie beschreiben, eignet sich für die Tatsache, dass Sie tatsächlich mehr Divs/Elemente haben werden, um das Navi, die Suche usw. zu enthalten. Der Hinweis ist jedoch in meiner Antwort, dass Sie den Header erstellen display: table-cell;

    – clairesuzy

    26. März 2011 um 12:27 Uhr


  • OK, eine “Tabellenzelle” muss Teil von “Tabelle” sein (anscheinend sind sogar CSS-Anzeigebegriffe ;)) – damit sie also die 100% -Breite annimmt – können Sie entweder das Körperelement erstellen display-table; width: 100% auch oder wenn Sie ein “Wrapper”-Div haben, machen Sie es dort und erstellen Sie ein Containerelement display: table sollte sich nicht negativ auf die Dinge auswirken, tatsächlich kann es Vorteile wie Spalten in voller Länge, aber YMMV haben

    – clairesuzy

    26. März 2011 um 13:16 Uhr


Flexbox kann dies jetzt ziemlich einfach tun:

header {
     display: flex;
     align-items: center;
     justify-content: center;;
}

http://codepen.io/anon/pen/waYBjv

  • Dies ist keine vertikale Ausrichtung, dies ist eine horizontale Ausrichtung

    – Oli

    28. August 2020 um 21:39 Uhr

  • Dies ist dann die bessere Option display: table-cell;.

    – Nilay

    15. Dezember 2020 um 7:06 Uhr

Versuchen Sie dies, funktioniert sehr gut für mich:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Benutzer-Avatar
Saurabh Gökhale

Das vertical-align -Attribut gilt nur für Inline-Elemente. Es hat keine Auswirkung auf Elemente auf Blockebene, wie ein div oder einen Absatz. Wenn Sie ein Inline-Element vertikal in der Mitte ausrichten möchten, verwenden Sie einfach dies.

vertical-align: middle;  

Schau dir hier mehr an: Grundlegendes zur vertikalen Ausrichtung oder „Wie man Inhalte vertikal (nicht) zentriert“

Benutzer-Avatar
Marcel

vertical-align funktioniert nicht so, wie du denkst, dass es in elements with funktioniert display:block. Die Leute verwenden normalerweise nur zum Beispiel line-height:60px wenn der Text das einzige Element im Element ist und alles in derselben Zeile bleibt.

Wenn mehr Zeug hineingeht, ist es wahrscheinlich besser, dem Container eine Höhe zu geben, wenn Sie unbedingt müssen, und den Rand / die Polsterung / etc. zu optimieren. von Elementen innerhalb des enthaltenden Elements, bis es richtig aussieht.

  • Nun, am Ende wird noch viel mehr im Header stehen (Navigation und so). Also verwenden line-height ist keine möglichkeit.

    – ryyst

    26. März 2011 um 12:17 Uhr


  • Ich kann den Text nicht in a einfügen div und vertical-align: middle das div obwohl seit divs sind nicht inline, richtig? Was ist eine gute Problemumgehung (Entschuldigung für die dummen Fragen, ich bin sehr neu in HTML/CSS).

    – ryyst

    26. März 2011 um 12:37 Uhr

  • Ohne zu wissen, welche anderen Elemente darin sein werden <header>ihre Positionen und wie das alles aussehen soll, darauf kann ich Ihnen keine gute Antwort geben.

    – Marcel

    26. März 2011 um 12:48 Uhr

  • Im Grunde ist es eine Leiste, die sich über den gesamten Bildschirm erstreckt. Ich habe Text und einige Schaltflächen in der Leiste. Alle diese Elemente sollten vertikal zur Mitte ausgerichtet sein. Sehr ähnlich wie die obere Leiste hier bei Stack Overflow, wirklich.

    – ryyst

    26. März 2011 um 12:51 Uhr


Benutzer-Avatar
brillant

Wenn Sie keine Tabelle verwenden möchten, können Sie vertical-align:middle und display:inline-block verwenden, während Sie ein leeres Inline-Element mit 100% Höhe verwenden:

http://jsfiddle.net/ycugZ/

<!DOCTYPE><html><body> <!-- Author: brillout.com -->

<div style="height: 300px;border: 1px solid black;text-align:center">
  <div class="i">vertical-align + inline-block<br>trick<br>in action</div>
  <div class="i" style="height:100%;width:0px"></div>
</div>
<style> div.i{ display: inline-block; vertical-align: middle } </style>

</body></html>

  • Nun, am Ende wird noch viel mehr im Header stehen (Navigation und so). Also verwenden line-height ist keine möglichkeit.

    – ryyst

    26. März 2011 um 12:17 Uhr


  • Ich kann den Text nicht in a einfügen div und vertical-align: middle das div obwohl seit divs sind nicht inline, richtig? Was ist eine gute Problemumgehung (Entschuldigung für die dummen Fragen, ich bin sehr neu in HTML/CSS).

    – ryyst

    26. März 2011 um 12:37 Uhr

  • Ohne zu wissen, welche anderen Elemente darin sein werden <header>ihre Positionen und wie das alles aussehen soll, darauf kann ich Ihnen keine gute Antwort geben.

    – Marcel

    26. März 2011 um 12:48 Uhr

  • Im Grunde ist es eine Leiste, die sich über den gesamten Bildschirm erstreckt. Ich habe Text und einige Schaltflächen in der Leiste. Alle diese Elemente sollten vertikal zur Mitte ausgerichtet sein. Sehr ähnlich wie die obere Leiste hier bei Stack Overflow, wirklich.

    – ryyst

    26. März 2011 um 12:51 Uhr


Benutzer-Avatar
Mahesh Cheliya

<div style="border:1px solid #000;height:200px;position: relative;">
     <div style="position: absolute;top: 50%;left:50%;">
     hello mahesh 
     </div>
</div>

Geige-Demo

Versuche dies.

  • Leider ist der Text nicht in der wahren Mitte. Die linke obere Ecke des Textfeldes befindet sich jetzt in der Mitte.

    – Christoph

    26. April 2017 um 1:51 Uhr

1017230cookie-checkText in CSS vertikal ausrichten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy