在同一行上對齊元素

Question

我正在嘗試創建一個自定義單選按鈕，有時候這些按鈕將會是圖像，有時還會僞造背景顏色。

這是我的時刻：

HTML

<div class="radio-inline radio-img"> 
    <input type="radio" name="cat" id="cat1" /> 
    <label for="cat1"> 
    <img src="//placekitten.com/150/150" /> 
    </label> 
</div> 

<div class="radio-inline radio-img"> 
    <input type="radio" name="cat" id="cat2" /> 
    <label for="cat2"> 
    <img src="//placekitten.com/151/151" /> 
    </label> 
</div> 

<div class="radio-inline radio-color"> 
    <input type="radio" name="cat" id="cat3" /> 
    <label for="cat3"> 
    <span></span> 
    </label> 
</div> 

CSS

input[type="radio"] + label span { 
    display: inline-block; 
    width: 48px; 
    height: 48px; 
    vertical-align: middle; 
    text-align: center; 
    cursor: pointer; 
} 

input[type="radio"] + label span { 
    background-color: #292321; 
} 

input[type="radio"]:checked + label span:before { 
    content: '\2714'; 
    color: #fff; 
    padding: 5px 
} 

http://codepen.io/anon/pen/GmNEvM

我做不到弄清楚如何對齊這兩種類型！我怎樣才能做到這一點？

謝謝！

Answer 1

默認情況下，內聯塊元素自己對齊到baseline。使用vertical-align: middle;作爲div。

.radio-inline { 
    display: inline-block; 
    margin-right: 20px; 
    vertical-align: middle; 
} 

預覽

前瞻：http://codepen.io/anon/pen/aWByaE

Answer 2

結帳這樣的：http://codepen.io/anon/pen/YVpxmg

input[type=radio] + label>span { 
    display: inline-block; 
    background: red; 
    width: 68px; 
    height: 68px; 
} 

您可以將任何元素的display設置爲block或inline-block並設置該元素的寬度和高度！

我已更新codepen以反映更改。

Answer 3

垂直對齊它的方式你喜歡因爲他們是內聯塊。並在第三個框中的跨度塊元素。見下面

.radio-inline { 
 
    display: inline-block; 
 
    margin-right: 20px; 
 
    vertical-align: top;/**Added*/ 
 
} 
 

 
input[type=radio] { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 

 
input[type=radio]:checked + label>img, input[type=radio]:checked + label>span { 
 
    box-shadow: 0 0 3px 3px #000; 
 
} 
 

 
input[type=radio] + label>img { 
 
    width: 68px; 
 
    height: 68px; 
 
    transition: 250ms all; 
 
} 
 

 
input[type=radio] + label>span { 
 
    position: absoltue; 
 
    background: red; 
 
    top: -20px; 
 
    left: 0; 
 
    padding-right: 34px; 
 
    padding-left: 34px; 
 
    padding-top: 34px; 
 
    padding-bottom: 34px; 
 
    display: block;/**Added*/ 
 
}

<div class="radio-inline radio-img"> 
 
    <input type="radio" name="cat" id="cat1" /> 
 
    <label for="cat1"> 
 
    <img src="//placekitten.com/150/150" /> 
 
    </label> 
 
</div> 
 

 
<div class="radio-inline radio-img"> 
 
    <input type="radio" name="cat" id="cat2" /> 
 
    <label for="cat2"> 
 
    <img src="//placekitten.com/151/151" /> 
 
    </label> 
 
</div> 
 

 
<div class="radio-inline radio-color"> 
 
    <input type="radio" name="cat" id="cat3" /> 
 
    <label for="cat3"> 
 
    <span></span> 
 
    </label> 
 
</div>