水平對齊不同元素

對齊這些元素的最佳方法是什麼？我想避免在複選標記圖標上使用margin-top將它們對齊到按鈕的中心線。水平對齊不同元素

我想避免這種

<div class="icon check" style="margin-top:11px;"></div>

住在這裏例如： JSFiddle

enter image description here

<div id="statusbar"> 
<div class="icon check"></div> <a class="btn inactive" href="">Button 1</a> 
<div class="icon check"></div> <a class="btn inactive" href="">Button 2</a> 
<div class="icon check"></div> <a class="btn inactive" href="">Button 3</a> 
</div>

來源

2013-10-10 Slinky

你可以包括你的CSS嗎？ –

你想如何對齊？你可以設置一個jsfiddle嗎？垂直對齊屬性可能會幫助你。 – Joseph

我希望複選框圖標與水平面上的按鈕對齊。所以想象添加padding-top：20px;複選框圖標 – Slinky

的一個好方法是設置vertical-align:middle的包裝和使用display:inline-block爲像這樣的孩子：

<div id="statusbar"> 
<div class="icon check"></div> <a class="btn inactive" href="">Button 1</a> 
<div class="icon check"></div> <a class="btn inactive" href="">Button 2</a> 
<div class="icon check"></div> <a class="btn inactive" href="">Button 3</a> 
</div> 

.icon{ 
    width:10px; 
    height:10px; 
    border:1px solid #000; 
    display: inline-block; 
} 

.inactive{ 
    display: inline-block; 
} 

#statusbar{ 
    height:auto; 
    vertical-align: middle; 
}

DEMO

來源

2013-10-10 20:51:41

我想嘗試設置的複選框圖標的高度爲等於該按鈕的高度，然後垂直定心複選框背景圖像。根據按鈕高度的設置，這可能是字體大小和行高，或者只是一個高度。然後我會用：

.icon { 
    background-position: 0 center; 
}

請分享一些你的CSS或JSFiddle，如果這沒有幫助。

來源

2013-10-10 20:53:49 dhendee

共享一個JSFiddle – Slinky

按鈕CSS指定高度：自動 – Slinky

水平對齊不同元素

回答

相關問題