Frage bezüglich des margins in HTML / CSS?
Guten Abend,
mir ist keine passende Frage eingefallen, weshalb ich nur das Thema in der Headline grob erklärt habe.
Da ich nicht weiß, wie man das nennt, oder das beschreibt, habe ich eine kleine Grafik zusammengehauen die evtl. mein Problem näher bringt. Es geht halt darum, dass wenn man zum Beispiel eine nav vertikal centern will, dies mit margin-top: 50vh macht, dann ist es immer etwas weiter unten als die Hälfte, eben aus dem Grund, weil die Maße ja so wie in Bild 1 sind. Also ich habe echt keine Ahnung wie man das erklären soll. Vielleicht versteht es irgendwer, ansonsten würde ich mich um Rückfragen bitten.
Danke an die Person, die bei meinem Chinesisch mitgekommen ist.
2 Antworten
Margin ist eigentlich keine Positionierung, sondern ein Außenabstand. Damit kann man zwar auch positionieren, aber schau dir mal Flexboxen oder Grid an
Im äußersten Notfall, wenn du es wirklich mit Margin machen willst, dann schau dir tranform: translateX(-50%) translateY(-50%); an
Für eine vertikale Zentrierung von Text kannst du das line-height-Property nutzen.
Angenommen, das Container-Element soll 50px hoch sein. Dann kannst du den gleichen Wert für line-height setzen.
nav {
border: 1px solid; /* for demonstration */
height: 50px; /* optional */
}
nav > a {
line-height: 50px;
}
Den gleichen Effekt (komplett ohne line-height) erzielst du mit einer Flexbox:
nav {
border: 1px solid; /* for demonstration */
display: flex;
flex-direction: column;
height: 50px;
justify-content: center;
}
Also bei line-height passiert bei mir rein gar nichts. Genauso wie bei der Flexbox die ganze Sache genauso wie im ersten Bild etwas zu weit unten ist.