顯示中心一排圖像

我有一排三個圖像，目前顯示的很好。顯示中心一排圖像

現在，我想在這三個下面再顯示兩個圖像，並且我希望它們居中（它看起來像是一個顛倒的金字塔）。

無論我做什麼，最下面一行都保持左對齊。

這裏是的CSS

.category 
{ 
width:176px; 
font-size:80%; 
text-align:center; 
float:left; 
position:relative; 
}

這裏的HTML：

<div style='width:95%; align:center'> 
<div class='category'><a href='individual.php'><img src='images/individual.jpg' style="padding-bottom:0.0em;" border='0' alt='Individual Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a> 
<b>Individuals</b></div>   
<div class='category'><a href='community.php'><img src='images/community.jpg' style="padding-bottom:0.0em;" border='0' alt='Community based Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a> 
<b>Communities</b></div>   
<div class='category'><a href='/police'><img src='images/first_respond.jpg' style="padding-bottom:0.0em;" border='0' alt='Police and send Electronic Neighborhood Watch Alerts by Email and Text Messaging'></a> 
<b>Fire/Police</b></div> 
<br> 
<div class='category'><a href='business.php'><img src='images/business.jpg' border='0' alt='Electronic Crime Watch Alerts by Email and Text Messaging for Businesses'></a> 
<b>Businesses</b></div>   
<div class='category'><a href='utility.php'><img src='images/utility.jpg' border='0' alt='Phone, Cable, Water, Gas and Power Outage Alerts'></a> 
<b>Utilities</b></div> 
</div>

這裏的是你可以看到原來三：http://www.neighborhoodwatchalerts.com/

因爲我不想測試頁露面在搜索引擎中，您可以使用上面的URL並在其上添加index2.php並查看全部5張圖片。

任何建議，將不勝感激！

來源

2011-09-02 ppetree

如果您將您的類別div設置爲具有display:inline-block的css屬性，則它們將遵守容器的text-align: center規則。
here's a fiddle

標記示例

<div class="container"> 
    <div class="category"></div> 
    <div class="category"></div> 
    <div class="category"></div> 
    <br/> 
    <div class="category"></div> 
    <div class="category"></div> 
</div>

的CSS

.container{ 
    border: 1px solid #ccc; 
    text-align: center; 
} 
.category{ 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background: #ccc; 
    margin: 5px; 
}

來源

2011-09-02 12:30:26 meouw

我正要發佈這個相同的東西。我會確保在較舊的IE瀏覽器上測試它。我相信至少IE6和IE7不會識別「內聯塊」，並將它們顯示爲「塊」，這意味着它們很可能會顯示爲垂直列而不是一行。您應該能夠通過將「float」保留在「.category」中來解決這個問題，但我相信您會失去所需的中心對齊方式。如果IE6/7對你很重要，那麼像Jason Gennaro這樣的解決方案可能是最好的。 – IMI

一種快速的方法是將底部的兩個div放在另一個div中，並使用margin: 0 auto;來居中。

因此，像

<div id="somethingWrapper"> 

     <div class='category'><a href='business.php'> 
     <img src='images/business.jpg' border='0' alt='yada'></a> 
     <b>Businesses</b></div>   

     <div class='category'><a href='utility.php'> 
     <img src='images/utility.jpg' border='0' alt='yadayada'></a> 
     <b>Utilities</b></div> 

</div>

CSS

#somethingWrapper{ 
    width:352px; //or something close 
    margin:0 auto; 
}

據透露......在margin的0可能帶來的兩排太近。您可能需要調整。

來源

2011-09-02 12:05:04

感謝這個傑森！ – ppetree

很高興幫助@ppetree！ –

顯示中心一排圖像

回答

相關問題