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 设置为 wrapper 并像这样为 child 使用 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