• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit vertical-allign Tag

G

gegetp

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

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

HTML Code:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<h1> Test </h1>
</body>
</html>

Kann mir jemand helfen? :/
 
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 :/
 
Probier mal, Sollte funktionieren.
Code: 
<!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>
 
djheke schrieb:
Probier mal, Sollte funktionieren.
Zum Vergrößern anklicken....

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

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.
 
Tronjer schrieb:
Respekt, du gibst dir wirklich Mühe, Anfängerfragen zu beantworten. :)

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.
Zum Vergrößern anklicken....

Danke erstmal. Ich gehe aber mal davon aus, dass es nicht bei einem Element bleibt. Wenn doch, dann ist dein Vorschlag natürlich ausreichend.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben