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?
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;;
}
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;
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“
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
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:
<!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
Mahesh Cheliya
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh
</div>
</div>
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
