zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden H1 vertikal zentrieren in Blockelement

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.08.2006, 12:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2006
Beiträge: 33
vertex befindet sich auf einem aufstrebenden Ast
Standard 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>
Das funktioniert, mehr oder weniger korrekt aber nur im IExplorer. Beim Firefox wird beim Zoomen das ganze nicht mehr mittig.

Wenn ich jetzt noch
Code:
  <p>
   <h1>Inhalt</h1>
  </p>
benutze, ist alles kaputt und die Überschrift hängt sogar auserhalb des Paragraphen.

mfg olli
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.08.2006, 12:33
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.08.2006, 12:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von vertex
Code:
  <p>
   <h1>Inhalt</h1>
  </p>
Das geht nicht. Ein p-Element kann kein h1-Element enthalten.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.08.2006, 12:41
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von fricca
Das geht nicht. Ein p-Element kann kein h1-Element enthalten.
Ups, das hatte ich glatt übersehen

@vertex: Ich hatte mich ausschließlich auf h1 bezogen, Deine Regel dagegen auf p (das hatte ich übersehen), und so geht das Markup natürlich wirklich nicht.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.08.2006, 13:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.03.2006
Beiträge: 33
vertex befindet sich auf einem aufstrebenden Ast
Standard

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;
   }
(Das P-Element ist jetzt ein Div-Element)
, 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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:53 Uhr.