css - 水平对齐不同的元素

Question

对齐这些元素的最佳方法是什么？我想避免在复选标记图标上使用 margin-top 将它们与按钮的中心线对齐。

我想避免这种情况

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

现场示例： JSFiddle

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

Answer 1

一个好方法是设置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;
}

演示

Answer 2

我会尝试将复选框图标的高度设置为等于按钮高度，然后将复选框背景图像垂直居中。根据按钮高度的设置方式，这可能是字体大小和行高，或者只是一个高度。然后我会使用：

.icon {
  background-position: 0 center;
}

如果没有帮助，请分享您的一些 CSS 或 JSFiddle。