对齐同一行上的元素

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

按照您喜欢的方式垂直对齐，因为它们是内联块。并使第三个框中的跨度成为块元素。见下文

<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>

util.js