I've a several columns in CSS, with float:left property to开发者_Go百科 align them horizontally. But as it float in the left side, I can't center all the divs.
So I found that if I wrap my columns with another div with display:table property, all works perfectly... but not in IE7 (idd, this property is not supported -.-).
Does anybody has a hack or trick for this?
Here is my code:
<div style="display:table">
<div style="float:left">A column</div>
<div style="float:left">A column</div>
<div style="float:left">A column</div>
<div style="float:left">A column</div>
</div>
Hm, why are you having a float: left on your leftmost div? I think that will cause some trouble. Do you have any css? You should have margin-left: auto and margin-right: auto on your outer div. Take a look on this page, there's all the details. Seems like you might have to add br-tags or similar too
if you use display:table;
on the parent dic, you should have display:table-row;
and display:table-column;
-elements in it - and floating doesn't make any sense in that case. please take a look at this or ask google for more information.
(if you want to display a table, why don't you use the table
-element? In cases where tables are used for layout, thats a bad practice, but doing the same sh*** by substituting table-crap for divitis doesn't make it better)
EDIT: if you just want to display your divs side by side and centered, you could simply try to use display:inline;
or display:inline-block;
(but the last will make problems in IE, too) - and remove that senseless display:table;
on the parent-div
精彩评论