用1或2行文本對齊圖標頂部用css

我有一組圖標，每個圖標下面有1或2行文本。我希望它們在頁面上彼此相鄰。每個用戶都有可變數量的圖標，所以我無法設置行數。這裏是我有什麼：click for image 用1或2行文本對齊圖標頂部用css

現在我試圖使圖標排列在水平軸上，文本也是這樣。所以即使一個項目只有一行文字，它也應該有兩個空間。基本上我想垂直對齊每個項目的頂部。那有意義嗎？

我嘗試了各種嘗試，使圖標垂直對齊頂部，但沒有任何工作。有任何想法嗎？

這裏的基本代碼：

<div id="menuicons"> 

    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_buses.png" alt="Buses"></a> 
<br><span align="center">Buses</span></div> 
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_bugs.png" alt="Report Bugs"></a> 
<br><span align="center">Report Bugs</span></div> 
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_directory.png" alt="The Directory"></a> 
<br><span align="center">The Directory</span></div> 
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_places.png" alt="Places"></a> 
<br><span align="center">Places</span></div> 
    more icons, etc... 
    </div>

和一些CSS：

#menuicons{ 
    padding:2px 2px 2px 2px; 
    text-align:center; 
    position:relative; 
} 

#menuicons img{ 
    border:none; 
    padding-bottom:2px; 
    padding-top:2px; 

    height:64px; 
} 

.menuicon{ 
    display:inline-block; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:14px; 
    text-align:center; 
    padding:3px 3px 3px 3px; 
    width:70px; 
    overflow:hidden; 

    position:relative; 
} 
.menuicon span{ 
    display:block; 
    width:78px; 
    height:2.1em; 
}

來源

2011-02-11 vee

http://stackoverflow.com/questions/4788302/aligning-icons-to-select-tag – reggie 2011-02-11 16:21:19

這裏：

JSFiddle

補充：

.container { 
    float:left; 
    width: 100px; 
}

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

圍繞2個元素組。

來源

2011-02-11 18:34:44

感謝您的幫助。爲什麼它必須圍繞每2個元素？我用1試了一下，結果搞砸了，但我不明白爲什麼。 – vee 2011-02-11 21:00:44

用1或2行文本對齊圖標頂部用css

回答

相關問題