CSS Vertikal zentrieren

[smallwall]

Hi,
ich brauche mal wieder Hilfe bei CSS

http://devphp.de/board/board2.php

Hier möchte ich die y-Koordinate (die Zahlen 1-8) zentrieren. Wie mach ich das am geschicktesten? Die Klasse heißt .coordy

mfg

 

[sparvar]

transform: translateY(50%);

noch nicht perfekt aber muss ja was für dich übrig bleiben (ist vielleicht nen ansatz)

 

[smallwall]

Das geht ja mal gar nicht, der Buchstabe ist zwar circa in der mitte, aber oben ist zu wenig und unten zu viel. Oben wird es weiß, unten wird der Hintergrund über das Ende herausgeschoben.

 

[sparvar]

ich weiß - jedoch evtl ein ansatz für dich.
mal ins blaue gedacht - weiteren div rein, zentriert - er beinhaltet die zahl - die äußere box hält die hintergrundfarbe.

 

[smallwall]

Ja, das wäre zwar OK, aber geht es mit dem bestehenen HTML nicht?

 

[sparvar]

der vorteil ist halt, dass du das innere element z.b. per %-padding top nach unten verschieben kannst.

es gibt aber bestimmt auch elegantere wege.

habe es mit dem bestehenden html element nicht hinbekommen

 

[smallwall]

Naja dann schreib ich noch kurz einen <div> drumherum. Danke erstmal.

 

[essidge]

div {
position: relative;
top: 50%;
transform: translateY(-50%);
}

 

[CapFuture]

Je nach Markup würde ich eher auf Flexboxen gehen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/