![]() |
SELFHTML Forumsarchiv |
|
|
Die folgende Nachricht zum Thema stammt von: Steffen Flämig, 28. 02. 2007, 12:16
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
Die folgende Nachricht zum Thema stammt von: stuempy, 28. 02. 2007, 13:05
»» vertical-align:middle;
^^ funktioniert nicht bei DIV
Funktionieren sollte:
line-height: [Höhe deines DIVs];
:]
Die folgende Nachricht zum Thema stammt von: D.R., 28. 02. 2007, 13:15
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
--
Experten raten von der Verwendung des Internet Explorers ab!
Mein SELF-stylesheet | Darum Firefox!
Selfcode: ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:| de:> js:) mo:} zu:}
Die folgende Nachricht zum Thema stammt von: wucher wichtel, 28. 02. 2007, 14:38
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 :-Odiv#test{
height: 200px;
display: table-cell;
vertical-align: middle;
background-color: #FF0000;
}
ciao, ww
--
sh:( fo:| ch:~ rl:( br:> n4:~ ie:% mo:) va:) de:] zu:) fl:( ss:| ls:~ js:)
Die folgende Nachricht zum Thema stammt von: D.R., 01. 03. 2007, 07:27
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!
Mein SELF-stylesheet | Darum Firefox!
Selfcode: ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:| de:> js:) mo:} zu:}
Die folgende Nachricht zum Thema stammt von: wucher wichtel, 01. 03. 2007, 13:05
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
--
sh:( fo:| ch:~ rl:( br:> n4:~ ie:% mo:) va:) de:] zu:) fl:( ss:| ls:~ js:)
Die folgende Nachricht zum Thema stammt von: D.R., 01. 03. 2007, 13:11
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
--
Experten raten von der Verwendung des Internet Explorers ab!
Mein SELF-stylesheet | Darum Firefox!
Selfcode: ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:| de:> js:) mo:} zu:}
Die folgende Nachricht zum Thema stammt von: MudGuard, 06. 03. 2007, 22:37
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
--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
Die folgende Nachricht zum Thema stammt von: HaThoV, 28. 02. 2007, 19:22
»» 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.
Die folgende Nachricht zum Thema stammt von: D.R., 01. 03. 2007, 13:25
Hallo,
»» »» <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}
»»
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
--
Experten raten von der Verwendung des Internet Explorers ab!
Mein SELF-stylesheet | Darum Firefox!
Selfcode: ie:{ fl:( br:> va:) ls:& fo:) rl:( n4:# ss:| de:> js:) mo:} zu:}
Die folgende Nachricht zum Thema stammt von: HaThoV, 01. 03. 2007, 19:51
»» 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.
Die folgende Nachricht zum Thema stammt von: at, 04. 03. 2007, 17:12
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
Die folgende Nachricht zum Thema stammt von: Alexander Rehbein, 01. 03. 2007, 14:34
»» 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...
© 1998-2006
Impressum, Software: Classic Forum