jquery - 在同一行对齐元素

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

默认情况下，内联 block 元素将自身与基线 对齐。对 div 使用 vertical-align: middle;。

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

预览

预览:http://codepen.io/anon/pen/aWByaE