Text in einem <div> vertikal zentrieren

[Steffen Flämig]

Hallo,

ich möchte in einem <div> welches höher als aktuelle Font ist den Text vertikal zentrieren:

-div----
|      |
| Text |
|      |
-/div---

Ich dachte dazu gibts:
vertical-align:middle;

Mein Text bleibt aber beharlich oben kleben :-(.

Danke für einen Tipp.
Gruß

Steffen

[stuempy]

vertical-align:middle;

^^ funktioniert nicht bei DIV
Funktionieren sollte:
line-height: [Höhe deines DIVs];

:]

[D.R.]

Hallo,

Funktionieren sollte:
line-height: [Höhe deines DIVs];

Aber nur so lange es keinen Zeilenumbruch gibt. Eine bessere Lösung kenne ich aber leider auch nicht…

mfg. Daniel

[wucher wichtel]

Hallo!

Funktionieren sollte:
line-height: [Höhe deines DIVs];

Aber nur so lange es keinen Zeilenumbruch gibt. Eine bessere Lösung kenne ich aber leider auch nicht…

Mit display und vertical-align funktioniert es. Allerdings nicht im IE. Nicht mal der 7er kann es :-O

  
div#test{  
  height: 200px;  
  display: table-cell;  
  vertical-align: middle;  
  background-color: #FF0000;  
}  

ciao, ww

[D.R.]

Hallo,

Funktionieren sollte:
line-height: [Höhe deines DIVs];

Aber nur so lange es keinen Zeilenumbruch gibt. Eine bessere Lösung kenne ich aber leider auch nicht…

Mit display und vertical-align funktioniert es. Allerdings nicht im IE. Nicht mal der 7er kann es :-O

div#test{
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  background-color: #FF0000;
}

  
Muss sich die Tabellen-zelle nicht innerhalb einer Tabelle (ein Element mit display:table) befinden?  
  
mfg. Daniel

-- 
[Experten raten von der Verwendung des Internet Explorers ab!](http://web.oesterchat.com/internet-explorer/)  
[Mein SELF-stylesheet](http://danielrichter.da.funpic.de/SELFForumsCSS.html) | [Darum Firefox!](http://www.firefox-love.de/)  
[Selfcode](http://forum.de.selfhtml.org/cgi-bin/selfcode.pl): [ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:| de:> js:) mo:} zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%28+br%3A%3E+va%3A%29+ls%3A%26+fo%3A%29+rl%3A%28+n4%3A%23+ss%3A%7C+de%3A%3E+js%3A%29+mo%3A%7D+zu%3A%7D)

[wucher wichtel]

Hallo!

Muss sich die Tabellen-zelle nicht innerhalb einer Tabelle (ein Element mit display:table) befinden?

Das weiß ich nicht. Wäre aber interessant zu wissen.

ciao, ww

[D.R.]

Hallo,

Muss sich die Tabellen-zelle nicht innerhalb einer Tabelle (ein Element mit display:table) befinden?

Das weiß ich nicht. Wäre aber interessant zu wissen.

Gut, dann die Antwort:
Ja. Eine Tabellenzelle (table-cell) wird erst wirksam, wenn sie sich innerhalb einer Tabelle (table) befindet. Im Gegensatz zu richtigen Tabellen, benötigt man aber nicht zwingend eine Tabellenreihe (table-row).

mfg. Daniel

[MudGuard]

Hi,

Muss sich die Tabellen-zelle nicht innerhalb einer Tabelle (ein Element mit display:table) befinden?

Das weiß ich nicht. Wäre aber interessant zu wissen.

Gut, dann die Antwort:
Ja. Eine Tabellenzelle (table-cell) wird erst wirksam, wenn sie sich innerhalb einer Tabelle (table) befindet.

Falsch.

Falls das Elternelement eines Elements mit display table-xxx nicht das entsprechend nächsthöhere in der Tabellenhierarchie ist, wird eine entsprechende Box implizit eingefügt.

Siehe http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

cu,
Andreas

[HaThoV]

Hallo,

ich möchte in einem <div> welches höher als aktuelle Font ist den Text vertikal zentrieren:

-div----
|      |
| Text |
|      |
-/div---

Frommer Wunsch :)

Ich dachte dazu gibts:
vertical-align:middle;

Stimmt. Gilt aber nur für Tabellenzellen. Nimm anstelle des DIVs doch einfach ein TABLE-Element:

  
<table id="vAligned"><tbody><tr><td>Text</td></tr></tbody></table>  

"middle" sollte da die Voreinstellung sein. Ansonsten per CSS:

  
#vAligned td {vertical-align:middle}  

Danke für einen Tipp.

gg
T.

[D.R.]

Hallo,

<table id="vAligned"><tbody><tr><td>Text</td></tr></tbody></table>

>   
> "middle" sollte da die Voreinstellung sein. Ansonsten per CSS:  
>   
> ~~~css
  

> #vAligned td {vertical-align:middle}  
> 

Warum so umständlich?

HTML:
<div class="mittig"><p>Text</p></div>

CSS:

  
.mittig {display:table;}  
.mittig p {display:table-cell; vertical-align:middle;}

Ist zwar auch nicht optimal, aber immer noch besser, als den Code mit unnötigen Tabellen aufzublähen.

mfg. Daniel

[HaThoV]

Warum so umständlich?

HTML:
<div class="mittig"><p>Text</p></div>

CSS:

.mittig {display:table;}
.mittig p {display:table-cell; vertical-align:middle;}

>   
> Ist zwar auch nicht optimal, aber immer noch besser, als den Code mit unnötigen Tabellen aufzublähen.  
  
Im meinem Fall wird der HTML-Code komplexer, in Deinem der CSS-Code. Wenn's öfter vorkommen soll, würde ich Deine Methode vorziehen. Bei einmaligem Vorkommen eher meine.  
  
mfg  
T.

[at]

Hallo.

Im meinem Fall wird der HTML-Code komplexer, in Deinem der CSS-Code. Wenn's öfter vorkommen soll, würde ich Deine Methode vorziehen. Bei einmaligem Vorkommen eher meine.

Letzteres aber nur, wenn tabellarische Daten ausgezeichnet werden sollen, wovon bei einer einzigen Zelle kaum auszugehen ist.
MfG, at

[Alexander Rehbein]

ich möchte in einem <div> welches höher als aktuelle Font ist den Text vertikal zentrieren:

Da mich das Thema gerade selbst betrifft habe ich Google auch noch ein wenig angeworfen und folgenden Workaround gefunden:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Vielleicht interessiert Dich das auch? Ich werde es heute abend zumindest mal ausprobieren...