[CSS] Vertikales zentrieren eines Anker-Textes

[Mini-Leopard]

Liebe Community!

Ich suche jetzt seit einer halben Ewigkeit eine Möglichkeit, den Text in einem Anker (<a>) vertikal zu zentrieren.
Leider kann ich nur den Anger nehmen, da ich ein dynamisches Menü mit CSS programmiere. Und da funktioniert nur das <a> Element, an einer bestimmten Stelle.

Allerdings möchte ich auch nicht einfach line-height:50px; benutzen, da ich den Umbruch an manchen Stellen brauche.


Für jegliche Hilfe bin ich sehr dankbar!
Liebe Grüße & schönen Abend
Julian

 

[timmy38233]

Ich denke, das sollte mit:

display: table-cell;
vertical-align: middle

funktionieren. Damit wird das a-Element wie eine Tabellen-Zelle behandelt und bei dieser funktioniert i.d.R. das vertical-align… Kann es leider gerade nicht ausprobieren.

 

[drp]

Oder:
CSS:

display: block; text-align: center;

oder

display: inline-block; margin: 2px auto;

 

[Mini-Leopard]

@timmy38233:
Funtioniert leider nur bedingt.
Ich mache:

display:block;

Wenn ich allerdings Deine Variante verwende, wird das Element nicht mehr in der richtigen Höhe angezeigt.
Auch passt sich der Hintergrund an den Inhalt an.
Das führt dazu, dass das Menü so aussieht:



Die Unterpunkte sollen allerdings so hoch sein, wie die Hauptpunkte.
Und die Breite sollte sich auch automatisch an die Hauptpunkte anpassen, wie das bei block der Fall ist.


@drp:
Deine Version beschäftigt sich nicht mit vertikalem Zentrieren, sondern mit horizontalem.
Allerdings zerstört auch diese Variante das Layout nahezu vollständig:




Ich habe es jetzt vorerst mit padding-top: gelöst.
Zwar ist da noch nichts so, wie es sein soll, allerdings ist es schon mal besser.


Trotzdem schon mal schönen Dank für die Vorschläge.
Hoffentlich klappt das noch...

 

[drp]

Achso! Versuch mal Display: Inline-Block; und dann margin: Auto Auto;

 

[Mini-Leopard]

Das zentriert zwar die Elemente selber und den darin enthaltenen Text horizontal, allerdings wieder nicht vertikal.
Zusätzlich stimmen in dem Moment weder Höhe, noch Breite.

Ich verstehe einfach immer noch nicht, wieso so viele Anweisungen existieren müssen, die auf verschiedene Elemente und display Anweisungen komplett anders reagieren. Und ich verstehe auch nicht, wieso es nicht einfach sowas wie vertikales Zentrieren in Div's gibt.

Jedenfalls funktioniert nicht eine einzige Möglichkeit, die mir die Welt aufzeigen kann.
Und dabei ist das in Design-Geschichten so grundlegend… Einfach unverständlich.

Also scheinbar ist mein Problem nicht lösbar, bis irgendwann mal CSS 175.000 veröffentlicht wird und man sich endlich entschließt, einheitliche und cross-Browser gleich interpretierte Anweisungen und Eigenschaften einzuführen.

Danke für die Bemühung

 

[joro]

Hallo,
zum Teil hat timmy38233 das ja schon geschrieben...

gib dem li der subnavi (bzw dem Elternelement des a):

display: table;

und dem a der subnavi

display: table-cell;
vertical-align: middle;

Wenn das nicht funktioniert, zeig doch mal deinen Aufbau des Menüs (CSS + HTML), dann kann man damit mal rumspielen.

Liebe Grüße,
joro

 

[drp]

Hm... Also das mit dem Positionieren genau auf der Mitte des Bildschirms habe ich schonmal so hinbekommen...

 

[Mini-Leopard]

@drp:
Das interessiert mich ebenfalls.
Hab ich aber leider auch noch nicht hinbekommen.
Kannst Du mir vielleicht 'ne PN mit Deinem Code für die Bildschirmmitte schicken?

@joro:
Ich werd's mal so ausprobieren…
Allerdings verfahre ich so:

<div class="menu">
	<div class="item_active" style="width:125px;">
		<a href="./eins.html">
			Eins
        		<a class="sub_item" href="./zwei.html">
				Zwei
			</a>
			<a class="sub_item" href="./drei.html">
				Drei
			</a>
		</a>
	</div>
</div>

So funktioniert das perfekt.
Eben bis auf mein geschildertes Problem.
Das heißt, dass ich mein CSS Code folgendermaßen lauten muss?

.item_active{
	display:table;
}
.sub_item{
	display:table-cell;
	vertical-align:middle;
}

Richtig soweit?
Ich werds mal ausprobieren.

Herzlichen Dank schon mal, ich schreibe später wieder.