Text mittig im DIV ausrichten?

[Schultheiss]

Ich habe auf meiner Seite ein DIV in dem ich den Text mittig ausrichten möchte...

<div id="eins">Text</div>

in der CSS hab ich dem DIV Größen und ein Hintergrund zugefügt...

#eins { width: 150px;
height: 150px;
background-image: url("img.png") ;

aber nun weiß ich nicht wie ich den Text bzw Inhalt des DIVs mittig ausrichte!

Habe es mit text-align: middle versucht aber dies funktoniert leider nicht:neutral:

 

[Lenchen]

text-align:center;
nicht text-align: middle !

 

[Schultheiss]

Ich möchte dem Inhalt nicht zentrieren sondern mittig ausrichten...also nicht nur links/rechts sondern auch oben/unten.

 

[Lenchen]

versuch mal
vertical-align: middle;

 

[Schultheiss]

versuch mal
vertical-align: middle;

Funktioniert leider auch nicht:cry:

 

[threadi]

versuch mal
vertical-align: middle;

Das geht nur bei Tabellenzellen oder inline-Elementen die zueinander vertikal ausgerichtet werden (z.B. bei <span>Text1</span><span>Text2</span>). Es ist nicht möglich den Inhalt eines Block-Elements (wie <div id="eins">Text</div>) vertikal auszurichten.

 

[Schultheiss]

Das geht nur bei Tabellenzellen oder inline-Elementen die zueinander vertikal ausgerichtet werden (z.B. bei <span>Text1</span><span>Text2</span>). Es ist nicht möglich den Inhalt eines Block-Elements (wie <div id="eins">Text</div>) vertikal auszurichten.

Aha, vielen dank für die Info!

Habe nun mal um den Text ein span gesetzt und in der CSS folgendes zugefügt

span {vertical-align: middle}

jedoch ändert sich leider noch immer nichts.

 

[threadi]

Du hast meinen ersten Satz nicht ganz verstanden (ist zugegebenermaßen auch ein schwieriges Thema).

Was nicht geht:

<div><span>text</span></div>

Was geht:

<span>text1</span><span>text2</span>

Du willst aber den Text in einem div vertikal ausrichten. In dem Fall würde ich dir raten nicht mit vertical-align zu arbeiten sondern mit position: absolute;. Schau dir dazu mal das an:

Vertical Centering in CSS
Vertical centering using CSS

Man beachte jedoch die unterschiedlichen Interpretationen der Browser. Es gibt da imho keine optimale Lösung.

 

[Schultheiss]

Achso dann kann es ja auch nicht klappen;ugl
Leider ist mein Englisch so schlecht, das mir die Anleitung aus der verlinkten Seite nicht wirklich verständlich ist

 

[threadi]

Es gibt auch genügend deutschsprachige Seiten zu dem Thema:

CSS: horizontale und vertikale Zentrierung
Webstandards-Projekt - Vertikal Zentrieren
Vertikale Zentrierung mit CSS | Dr. Web Magazin

 

[prm]

Wenn der Text mehrzeilig ist, wird's in der Tat problematisch.
Bei einzeiligem Text hilft zur vertikalen Ausrichtung in Abhängigkeit zur Div-Höhe dies:

#eins { width: 150px;
height: 150px;
background-image: url("img.png") ;
text-align: center;
line-height: 150px;
}

 

[neuroleptika]

Wenn der Text mehrzeilig ist macht eine px-Höhe des Elternelementes wenig Sinn.
Nur Internet Explorer bis Vers.6 würden eine Box mit height:Wert.px; vergrößern wenn der Inhalt nicht hinein passt.

Die Box sollte dem Inhalt entsprechent mitwachsen.
Ein padding der Umgebenen Box würde den Text immer vertikal zentrieren.

Wenn es dir darum geht einen Fließtext auf eine pixelgenaue Grafik zu "malen" bist du auf dem falschen Weg.

Ansonsten könntest du vertical-align:middle; zusammen mit display: table-cell; verwenden.
Für Internet Explorer bis einschl. Vers.7 kann man für inline-Elemente ( oder display: inline; ) mit haslayout auch vertical-align verwenden.

Vorher solltest du aber die feste px-Höhe überdenken.

Vielleicht zeigst du mal deine Grafik. Möglicherweise läßt sie sich sinnvoll zerschneiden / aufteilen.

 

[Fidelis]

Falls du es noch nicht hast, mach es wie threadi gesagt hat: mit "position:absolute"

Um den Text in die Mitte zu kriegen, fass ihn erstmal in eine TABELLE.
Dann schreibst du diesen Code um Den Text + Tabelle:

<div style="position:absolute; left:1000px; top:1000px; right:1000px; bottom:1000px>´Tabelle mit Text darin´</div>

Die Tabelle mit dem Text wird jetzt einen Linksabstand von 1000 Pixeln haben, von rechts, oben und unten auch. Da so gut wie alle Bildschirmauflösungen nicht so hoch sind, wird dein Text komplett zentriert! Egal was für eine Auflösung der Benutzer hat!

 

[neuroleptika]

In Tabellenzellen kann man mit vertical-align arbeiten.
position: absolute; funktioniert im IE nur mit left oder right und top oder bottom.

Boxen mit fester Höhe braucht man gewöhnlich nur wenn sie mehrzeilig nebeneinander stehen sollen (z.B. Thumpnails)

Ansonsten sollte der Inhalt die Höhe bestimmen und nicht umgekehrt.
padding: 40px 0 40px 0; für das äußere Element oder margin: 40px 0 40px 0; für das innere.