DIV Inhalt Vertikal zentrieren

[dotnet]

Hallo,

ich komme gerade nicht weiter :(. Ich möchte den Inhalt meines DIV's Vertikal zentrieren. Habe schon einiges probiert was ich im inet gefunden habe, nichts hat geklappt :(.

<div class="test">
            <p>blabla</p>
            <p>blabla</p>
</div>

width: 300px;
height: 80px;
float: right;

 

[alogheo]

display: inline-block;
vertical-align: center;

Funktioniert aber nicht in verbindung mit float.

 

[dotnet]

Hi alogheo,
ich brauche das float :(.

 

[alogheo]

Dann halt mit einer Div-Tabelle:

<style>
.test
{
  display:table;
  height: 80px;
  width:300px;
  float: right;
  vertical-align:center;
}
</style>


<div class="test">
 <div style="display:table-row">
  <div style="display:table-cell">
    <p>bla bla</p>
    <p>bla bla</p>
  </div>
 </div>
</div>

 

[dotnet]

Oha 3 DIV's, das kann ich auch nicht bringen. Aber trozd. danke für die Hilfe.

 

[alogheo]

oh, muss grad feststellen, dass der Teil weggelassen werden kann:

 <div style="display:table-row">
  <div style="display:table-cell">

 

[dotnet]

Habe es probiert, geht leider nicht :(.

 

[alogheo]

Welcher Browser?

 

[dotnet]

Firefox 3.6.13 (aktuelle)

 

[dotnet]

Ich habe es jetzt so gemacht:

<div class="test">
<table>
  <tr> 
    <td>
      <p>blabla</p>
      <p>blabla</p>
    </td>
  </tr>

</table>
</div>

Die ausrichtung habe ich in der CSS gesetzt, ich finde es nicht sauber, sollte aber jemand ne Idee haben wie es besser geht, bitte hier Posten .

Grüße

 

[alogheo]

Firefox 3.6.8 -> funzt (genauso IE8, Opera 9, Chrome 7)

komisch..., funktioniert es denn mit den beiden gelöschten Zeilen, oder vlt. kein doctype, ...mehr fällt mir jetzt nich ein

 

[dotnet]

ich habe es ohne den 2 zeilen gemacht

<style>
.test
{
  display:table;
  height: 80px;
  width:300px;
  float: right;
  vertical-align:middle;
}
</style>


<div class="test">
    <p>bla bla</p>
    <p>bla bla</p>
</div>

 

[dotnet]

ok, es geht, das reset.css war das problem.

Ich habe einfach diese 2 werte hinzugefügt (in die klasse):

  height: 50px;
  padding: 1%;

Danke dir @alogheo

Grüße