Problem mit vertical-allign Tag

Ich hab ein kleines Problem mit dem vertcal-allign Tag. Er funktioniert schlichtweg nicht :stuck_out_tongue:

CSS Code:
h1 {
color: black;
font-size: 120%;
vertical-align: middle;
text-align: center;
}

HTML Code:

Test

Kann mir jemand helfen? :confused:

Hallo,

du wendest vertical-align wohl falsch an, eine vertikale Positionierung innerhalb eines Block-Elements ist damit nicht möglich.

Siehe auch

http://www.css4you.de/Texteigenschaften/vertical-align.html

Gruss

MrMurphy

Nimm doch einfach padding: und gut is.

Wozu eigentlich vertical-align? Eine h1 wird so hoch wie der darin liegende Inhalt, und für vertikale Zentrierung von Einzeilern innerhalb Blockelementen gibt es height und line-height.

Hallo

ich denke gegetp möchte den Text mittig im Fenster zentrieren. Das würde ich aktuell mit Flexbox erledigen.

Gruss

MrMurphy

h1 {
color: black;
font-size: 120%;
margin: auto;

text-align: center;

}

Das sähe dann so aus? Funktioniert bei mir nicht :confused:

Probier mal, Sollte funktionieren.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
* {
 margin:0;
 padding:0;
}

html , body {
 height:100%;
 width:100%;
}

body {
 display:table;
}
h1 {
 display:table-cell;
 vertical-align:middle;
 text-align:center;
}
</style>

</head>
<body>
<h1> Test </h1>
</body>
</html>

Perfekt! Vielen, vielen dank!

Respekt, du gibst dir wirklich Mühe, Anfängerfragen zu beantworten. :slight_smile:

Wobei display: table-cell primär verwendet wird, um Blockelemente vertikal aneinander auszurichten. Wenn ich nur ein Element habe, bietet sich alternativ dazu margin-top: calc() an.

Danke erstmal. Ich gehe aber mal davon aus, dass es nicht bei einem Element bleibt. Wenn doch, dann ist dein Vorschlag natürlich ausreichend.