水平对齐不同的元素

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

DEMO

Answer 2

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

.icon {
  background-position: 0 center;
}

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