HTML

div style=width:150px; height:45px; vertical-align:middle;

Diskussionsgruppen
Betriebsysteme: Windows 7; WindowsVista; WindowsXP; Linux; BS-Sonstige
Software: Textverarbeitung; Tabellenkalkulation; Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; E-Mail/Outlook; Internet Browser; SW-Sonstige
Hardware: Mainboard/CPU/RAM; Grafikkarten; Peripherie; HW Sonstiges
Netzwerk: DSL; W-Lan; Telekommunikation; NW-Sonstiges
Programmierung: Skripte(PHP,ASP,Perl...); Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke

Frage

Ich möchte den Inhalt eines DIV vertikal vermitteln. Das klappt aber mit[code]<div style="width:150px; height:45px; vertical-align:middle;">[/code] nicht. Wer ann mir sagen, wie es mit möglichst wenig Aufwand geht?

Antwort 1 von Dr.Ma-Busen

Moin!

Ja, dass kenne ich.

Erweiter das ganze mal mit

display:table-cell

Dann sollte es funktionieren.

MfG
Dr. Ma-Busen

Antwort 2 von Friedel

Funzt leider nicht.

Ich definiere im Head:

<style type="text/css">
<!--
.meto {background-color:#ccc; padding:0; position:absolute;
       top:0; width:150px; height:45px;
       z-index:1; border-top:2px solid #ddd;
       border-left:1px solid #ddd; border-right:1px solid #aaa;
       border-bottom:1px solid #aaa;}
-->
</style >

Im Body kommt dann:

<div class="meto" style="left:150px;" onMouseover="men(2)" onMouseout="out()">
  <p>Text</p></div>

Das funzt soweit (in IE6, NN7, Opa7, Firebird und Moz1.6). Aber der Text in den Divs wird natürlich oben links angezeigt. Wenn ich .meto um

display:table-cell; vertical-align:middle;

erweitere, hat das in IE und Opa keine Auswirkung. In den Geckos wird das DIV dann nicht mehr an der richtigen Position dargestellt (sondern viel tiefer) und der Text ist nach wie vor oben links im DIV.

Kann es sein, dass man

display:table-cell;

nur verwenden soll, wenn man übergeordnete Elemente mit

display:table-row

und

display:table

hat?

Antwort 3 von Dr.Ma-Busen

Ja, laut css4You kann der IE das mal wieder nicht.

Problem liegt glaube bei position:absolute.

Du könntest in den DIV ein weiteres DIV machen. Das äusere DIV positionierst du, und das innere Formatierts du dann mit mit vertical-align, color usw.

Hier mal mein Versuch:

 ....

<style type="text/css">
<!--
.meto{
position:absolute;
top:0px;
}

.meto > p {
display:table-cell; vertical-align:middle;
background-color:#ccc; padding:0; 
       width:150px; height:45px;
       z-index:1; border-top:2px solid #ddd;
       border-left:1px solid #ddd; border-right:1px solid #aaa;
       border-bottom:1px solid #aaa;}
-->
</style >


....

<div class="meto" style="left:150px;" onMouseover="men(2)" onMouseout="out()">
  <p>Text</p></div>

...

Antwort 4 von Friedel

Funzt auch nicht. Dabei kommt eine völlig falsche Darstellung heraus. Und der Text ist unverändert nicht in der Mitte.

Übrigens lag es nicht am IE, der "das mal wieder nicht kann". Es hat in keinem Browser funktioniert.

Ich denke ich werde auf Tabellen zurückgreifen. Das funzt wenigstens in allen Browsern und in allen Versionen.

Trotzdem danke für die Unterstützung. Es ist gut zu wissen, dass auch andere Leute, die sich gut auskennen, mit solchen banalen Problemen ihre Mühe haben. Falls dir nach was einfällt, interessiert es mich natürlich trotzdem. Das Problem wird sicher irgendwann wieder auftreten.

Antwort 5 von schimmi

Hallo Fiedel,

probier das doch mal. Geht jedenfalls mit Firefox, Mozilla und IE6.

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta name="author" content="schimmi">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
<!--
#box1 {
      height: 50px;
      width: 160px;
      margin-top: -25px;
      margin-left: -80px;
      top:50%;
      left:50%;
      position: absolute;
      border: 1px dotted black;
      }
.meto {
       text-align: left;
       padding 10px;
       background-color:#ccc; padding:0; position:absolute;
       width:150px; height:45px;
       z-index:1; border-top:2px solid #ddd;
       border-left:1px solid #ddd; border-right:1px solid #aaa;
       border-bottom:1px solid #aaa;}
-->
</style >
</head>
<body>
<div id="box1">
  <div class="meto" onMouseover="men(2)" onMouseout="out()">
    <p>Text</p>
  </div>
</div>
</body>
</html>

Gruß,
schimmi

Antwort 6 von Friedel

@schimmi: Sorry, aber das isses sicher nicht. Was passiert, wenn man angibt

padding 10px; background-color:#ccc; padding:0;

ist wohl vom Browser abhängig. Padding sollte entweder 0 oder 10 px sein. Beides geht nicht. In diesem Quellcode ist nichts, was eine mittige Ausrichtung bewirken könnte. Außerdem ist das das Gegenteil von "wenig Aufwand".

Antwort 7 von MoRe99

Ist wohl das Boxmodell, das die da einen Streich spielt. Im IE wird das padding falsch interpretiert, wenn auch wohl nicht in allen versionen gleich.
Es gibt einige Arten, diesen Fehler zu umgehen. U. a. gibt es einen Artikel, der vier hacks vorstellt.
Vielleicht findest du auch etwas bei positioniseverything.net.

Antwort 8 von Friedel

Das Padding ist wegen eben diesem Boxmodelbug auf 0 und soll auch so bleiben. Den letzteren Link werde ich mir ansehen. Danke.

Antwort 9 von Friedel

@MoRe99: Die Seite ist sehr gut. Einige der beschriebenen Bugs kannte ich noch nicht, ein paar davon kann ich allerdings auch nicht nachvollziehen, obwohl ich alle nötigen Browser installiert habe. Eine Lösunmg für das ursprüngliche Problem habe ich bisher allerdings nicht gefunden.

Kann es sein, dass man mit

<div style="width:150px; height:45px; vertical-align:middle;">

nur ein Blockelement vermitteln kann? Oder sogar nur ein Blockelement mit fester Höhe? Oder ist

vertical-align:middle;

in Divs nicht erlaubt? Mir ist nicht klar, warum das nicht funktioniert, deshalb weiß ich auch nicht recht wie ich nach einer Lösung suchen soll. Ich habe das mit allen aktuellen Browsern getestet und es funktioniert in keinem Browser.

Antwort 10 von marty

Warum benutzt du statt div nicht text-align ?
Du willst doch horizontal und vertikal vermitteln, oder ?

Man muss nicht alles wissen, aber sollte wissen wo es steht ...

Antwort 11 von MoRe99

Zitat:

Warum benutzt du statt div nicht text-align ?
Du willst doch horizontal und vertikal vermitteln, oder ?

Wie willst du mit text-align vertikal zentrieren?
@Friedel: das kann natürlich sein, dass das vertical-align nicht auf divs anwendbar ist. Hatte das div auch nicht in der Liste auf css4you gefunden.

Antwort 12 von Friedel

Mir ist dann nicht ganz klar, wozu vertical-align überhaupt gut ist, wenn es in Blockelementen wie Div nicht funzt. In Inlineelementen macht es ja keinen Sinn. Mal sehen ob ich ein Beispiel finde, wo es außerhalb einer Tabelle benutzt wird.

@marty: Man kann text-align nicht statt div verwenden. Jede Formatierung muss einem Element zugeordnet werden.

Antwort 13 von MoRe99

Ohne selber drüber nachgedacht oder was probiert zu haben: hilft dir dieser Link weiter?

vertical-align:middle

Antwort 14 von Friedel

@MoRe99: Danke der Link hat mir sehr geholfen. Mein ursprüngliches Problem kann ich damit zwar nicht lösen, aber ich weiß jetzt warum die bisherigen Versuche gescheitert sind. Auf der Seite wird als (einzige) Lösung die Verwendung einer Tabelle vorgeschlagen, was ich als Notlösung eh schon gemacht hatte.

Antwort 15 von Dr.Ma-Busen

Hast du mal ein Bild wo man sieht wie es aussehen soll?

Also der vorschlag von mir aus Antwort 3 sieht bei mir so aus, soll das so aussehen, oder anders?.

Das ist jetzt im Opera, wie es im IE aussieht kann ich nicht sagen, da ich den hier nicht mehr habe.

Antwort 16 von Friedel

@Dr.Ma-Busen: So soll es aussehen. Ich hatte es nicht in allen Browsern getestet, aber ich hatte auf jedenfall IE6, Opa7, Moz1.1 oder 1.6, Firefox und NN7 getestet. Bei mir war der Text jeweils etwas über der Mitte. Inzwischen denke ich aber, dass das eigentlich funktionieren sollte und es ein Problem gab, weil ich einen anderen Fehler in der Seite hatte. Ich werde das noch mal testen. Allerdings bezweifle ich, dass es in Opa5 und Opa 6 funktioniert. Aber ich werde es sehen.

Antwort 17 von Friedel

@Dr.Ma-Busen: Nachdem der andere Fehler inzwischen beseitigt ist, habe ich deinen Quellcode nochmal getestet.

IE5.0: Die ganze Seite wird total falsch dargestellt. Ob die Schrift auf den Button mittig ist, kann man nicht erkennen. Die Buttons sind nicht sichtbar. Der Absatz mit dem Text ist genau so groß wie der enthaltene Text und nur das Wort Text ist grau hinterlegt. Außerdem sind alle anderen Textabsätze auf der Seite auch grau hinterlegt!
IE5.5 Wie IE5.0, nur dass die anderen Textabsätze der Seite nicht grau hinterlegt sind.
IE6 Wie IE5.5.
Opa5 Funktioniert einwandfrei. Sieht so aus wie auf deinem Screenshot. Das gleiche gilt für Opa6, Opa7, NN6, NN7, Moz1.1, Moz1.6 und Firefox 0.9.3