Divs floating wrong

Question

如何讓所有div對齊中心並停止浮動到紅色文本菜單div？我想要4個帶文本的菜單div在一起，但向下漂浮。

<div class='man1'><img style="margin-top:20px;" src="/img/man/nokian.png" /></div> 
<div class='man2'><img style="margin-top:20px;" src="/img/man/Gislaved.png" /></div> 
<div class='man3'><img style="margin-top:20px;" src="/img/man/hankook.png" /></div> 
<div class='man4'><img style="margin-top:20px;" src="/img/man/Gislaved.png" /></div> 
<div class='man5'><img style="margin-top:20px;" src="/img/man/hankook.png" /></div> 
<br /> 
<div class='fot1'> 
    <h1>Menu</h1> 
    <a href src="google.se">Link</a></br> 
    <a href src="google.se">Link</a></br> 
    <a href src="google.se">Link</a> 
</div> 
<div class='fot2'> 
    <h1>Menu</h1> 
    <a href src="google.se">Link</a></br> 
    <a href src="google.se">Link</a></br> 
    <a href src="google.se">Link</a></div> 
</div> 
<div class='fot3'> 
    <h2>Phone nbr</h2> 
    <h3> 
     Adress</br> 
     adress</br> 
     adress 
    </h3> 
</div> 
<div class='fot4'> 
    <h4>Text1</h4> 
    <h4>Text2</h4></br> 
    <h4>Text3</h4></br> 
</div> 

CSS：

.man1, .man2, .man3, .man4, .man5 { 
    width:178px; 
    height:78px; 
    display:inline-block; 
    position:relative; 
    float:left; 
    margin-top:10px; 
    margin-left:15px; 
    border:1px solid #e6e6e6; 
    border-radius:5px; 
    background: #f00; 
} 

.fot1, fot2, h1, h2 {color:#fc7701} 

.fot1, fot2, h1 { 
} 
.fot1, .fot2, .fot3, .fot4 { 
    width:220px; 
    height:auto; 
    position:relative; 
    display:inline; 
    float:left; 
} 

小提琴：http://jsfiddle.net/e69wE/

Answer 1

我想4菜單div與文本在一起，但向左向下浮動。

我認爲CSS的下面的代碼片段將實現這一點：

.fot1 { 
    clear: left; 
} 

我怎樣才能讓所有div對齊中心...？

對不起，你能澄清你想要的嗎？你想紅色的DIV像這樣排列嗎？

+--+ +--+ +--+ 
| | | | | | 
+--+ +--+ +--+ 

    +--+ +--+ 
    | | | | 
    +--+ +--+ 

如果是這樣的話，你會想用紅色的DIV display: inline-block並取出float: left。

小提琴：http://jsfiddle.net/e69wE/1/

Answer 2

要對齊中心嘗試的div：

保證金左：自動; margin-right：auto;

不知道你在問什麼菜單div。

Answer 3

我猜你嘗試配對的菜單和圖像，並讓他們漂浮起來呢？

嘗試將圖像div放入相應的manX div中。然後從那裏設計風格。