Zwei Elemente zentrieren

[Peter Mairhofer]

Hi,

Ich habe einen div-container mit einer fixen Breite von 600px (excl. padding).

Dort hinein möchte ich gerne 2 weitere div-Container verpacken. Diese zwei Container sollen sowohl horizontal zentriert sein, als auch vertikal:

+---------------------------+
|div1                       |
|    +-----+     +-----+    |
|    | div2|     |div3 |    |
|    +-----+     +-----+    |
|                           |
+---------------------------+

Aber wie stelle ich das an?

Ich habe es bereits mit vertical-align: middle; und text-align: center; probiert als auch mit margin: auto - sowohl im div1 als auch in div2 und div3 :-(

lg,
Peter

[Robert]

Hi,

suchst du etwas in der Art ?

<style type="text/css">
.div1
{
 width:100px;
 height:100px;
 border: 3px solid black;
}
.div2
{
 border: 1px solid red;
 padding:5px;
 margin-top:33px;
 margin-bottom:33px;
 margin-right:5px;
 margin-left:12px;
 float:left;
}
.div3
{
 border: 1px solid red;
 padding:5px;
 margin-top:33px;
 margin-bottom:33px;
 margin-left:5px;
 float:left;
}
</style>

<div class="div1">

<div class="div2">
test
</div>
<div class="div3">
test
</div>

</div>

[Peter Mairhofer]

suchst du etwas in der Art ?
[...]

Hi!

Danke für deine Antwort!

Aber das Problem dabei ist dass ich da ja die genauen Maße meiner Elemente kennen muss. Und die kenne ich nicht, da in den Elementen auch Formularelemente und Bilder vorkommen...

Gibt es eine "flexible" Lösung für das Problem, so in der Art wie align="center" und vertical-align="middle" bei Tabellenzellen?

lg,
Peter

[Harlequin]

Yerf!

Gibt es eine "flexible" Lösung für das Problem, so in der Art wie align="center" und vertical-align="middle" bei Tabellenzellen?

Nur die display:table-* Eigenschaften, die allerdings im IE noch nicht funktionieren.

Gruß,

Harlequin

[Robert]

Hi,

ich könnte dir höchstens noch das anbieten.
dazu brauchst du nur die höhe.

<style type="text/css">
.div1
{
 width:600px;
 height:100px;
 border: 3px solid black;
}
.div2
{
 border: 1px solid red;
 padding:5px;
}
.div3
{
 border: 1px solid red;
 padding:5px;
}

</style>

<div class="div1">

<table align="center" style="padding-top:50px">
<tr><td>
<div class="div2">
test
</div>
</td>
<td>
<div class="div3">
test
</div>
</td></tr>
</table>

</div>

[Robert]

Hi,

ich hätte hier noch eine vollständige lösung die für alle aktuellen Browser funktionieren müsste, allerdings mit Javascript:
<style type="text/css">
.div1
{
 width:600px;
 height:100px;
 border: 3px solid black;
}
.div2
{
 border: 1px solid red;
 padding:5px;
}
.div3
{
 border: 1px solid red;
 padding:5px;
}

</style>

<div class="div1" id="div1">

<table align="center">
<tr><td>
<div class="div2" id="div2">
test
</div>
</td>
<td>
<div class="div3">
test
</div>
</td></tr>
</table>

</div>

<script type="text/javascript">
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var tmp = div1.offsetHeight - div2.offsetHeight;

navigator.appName != "Microsoft Internet Explorer"
?
div1.style.paddingTop = tmp-(div2.offsetHeight/2)
:
div1.style.padding = tmp-(div2.offsetHeight/2);
</script>