nicht angemeldet
Hallo,
ich möchte eine "DIV-Tabelle" bauen, bei der die DIVs innerhalb der "Zeilen" horizontal zentriert sind. Ich habe bereits die Tabelle und den Umbruch hin bekommen. D.h. meine Tabelle funktioniert so, dass wenn eine DIV-Zelle nicht mehr in eine Reihe passt, wird umgebrochen und eine neue Zeile angefangen.
Beispiel:
DIV1 | DIV2 | DIV3
DIV4 | DIV5
Es soll aber so aussehen (untere Zeile nochmals zentrieren):
DIV1 | DIV2 | DIV3
DIV4 | DIV5
Aber die DIVS werden linkjsbündig angeordnet, beim Versuch die DIVs innerhalb der Zeile nochmal zu zentrieren komme ich nicht weiter. Und es geht auch nur im Firfox, der IE zeigt die Tabelle zerstückelt an.
Code:
<html>
<head>
<title> DIV Tabelle</title>
<style type="text/css">
div.draggable {
cursor:move;
padding:4px;
background-color: #BBCCDD;
}
</style>
</head>
<body>
<div style="text-align: left; display: table; width:450px; height:450px; overflow:hidden; border:6px; solid #FF0066;">
<div style="text-align: left; float: left; #position: absolute;#top: 50%;#left: 50%;display: table-cell; vertical-align: middle;">
<div id = "divele" class='draggable' style='float: left; vertical-align:text-top;'>divele<br /><img src="dummy.gif" /></div>
<div align="center"><div class='draggable' style='float: left; vertical-align:text-top;'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='draggable' style='float: left; vertical-align:text-top;'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='draggable' style='float: left; vertical-align:text-top;'>Name Vorname<br /><img src="dummy.gif" /></div>
<div class='draggable' style='float: left; vertical-align:text-top;'>Name Vorname<br /><img src="dummy.gif" /></div></center>
</div>
</div>
</body>
</html>