在同一行上對齊元素

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 ，並為該元素設置寬度和高度！

我已經更新了代碼筆以反映所做的更改。

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>