|
|||
H1 vertikal zentrieren in Blockelement
Hier gab es ja schon tausende Threads zum Thema, wie man Blockemente vertikal zentriert, ich will aber Text - genauer eine H1 Überschrift - vertikal zentrieren in einem Paragraphen.
Code:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Vertical</title> <style type="text/css"> <!-- p { width: 200px; height: 200px; line-height: 200px; text-align: center; background: lightblue; } --> </style> </head> <body> <p> Inhalt </p> </body> </html> Wenn ich jetzt noch Code:
<p> <h1>Inhalt</h1> </p> mfg olli |
Sponsored Links |
|
||||
line-height: 200px; sieht super aus bei Zeilenumbruch. Brauchst Du zwingend height: 200px; oder kannst Du die Höhe auch durch padding-top/bottom erzeugen? Wenn beide Werte gleich sind und line-height gering, ist es auch vertikal zentriert.
Ansonsten schau mal hier: http://www.brunildo.org/test/valimid2.html |
Sponsored Links |
|
|||
Sorry, habe mich gerade lustigerweise mit DTD beschäftigt, und habe gleich mal nachgesehen, dass P kein H1 enthalten darf
Aber zum Problem: mit Padding geht es natürlich, ist aber nicht das Gelbe vom Ei. http://www.brunildo.org/test/valimid2.html Ich habe den Code so verstanden: Das Bild gibt dem Wrap die Höhe vor. Da das Bild ein Inline-Element ist, kann man natürlich Content(display: inline-block;) an dem Bild, und nicht am Wrap, vertikal zentrieren. Wohlgemerkt geht es natürlich mit Code:
div { width: 200px; height: 200px; display: table-cell; text-align: center; vertical-align: middle; background: lightblue; } , aber wiederum nicht im IExplorer(da er nicht table-xyz unterstützt) Ein Wrap extra für den IExplorer wollte ich größtenteils umgehen, zumal ich das Layout extern verlinke, und da keine XHTML Kommentare erlaubt sind. mfg olli Edit: mehr oder weniger hat es sich erledigt bei meinem Layout, da ich die H Überschrift gleich mal mit zum Layouten benutze(stört die Semantik aber nicht) und ich da halt mit line-height arbeiten kann/muss. Für den Firefox hätte ich natürlich gerne nur display: table-cell; vertical-align: middle; verwendet, aber line-height schließt das aus. Geändert von vertex (09.08.2006 um 14:07 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS-Seite horizontal und vertikal zentrieren! | Boof | CSS | 20 | 05.02.2010 13:23 |
Vertikal zentrieren | rusty | CSS | 13 | 08.04.2009 23:54 |
Hintergrundbild vertikal UND horizontal zentrieren? | yggdrasil | CSS | 3 | 06.07.2008 11:19 |
Vertikal zentrieren in Box | wandler | CSS | 5 | 01.08.2006 20:01 |
Bild vertikal zentrieren in Blockelement in IE nur m. TABLE | AndreasB | CSS | 11 | 13.03.2006 18:05 |