css - 如何将内联块和文本垂直居中放置，底部不留空格？

我想将所有元素垂直居中对齐，并使用50px的高度，但是不知何故，我遇到了2个问题：


这些项目的高度超过50像素（绿色）
“>”文本未垂直居中




的HTML

<div>
    <a href="#"><ins class="logo"></ins></a>
    <b>›</b>
    ...
</div>

的CSS

div {
    background:green;
}
a {
    display:inline-block;
}
.logo {
    display:inline-block;
    height:30px;
    padding:10px;
    background:blue;
}
b {
    line-height:50px;
    height:50px;
}

结果





JS-Fiddle示例：
http://jsfiddle.net/pG4y6/



如何通过更改CSS来实现？

最佳答案

div {
   background: none repeat scroll 0 0 #008000;
    display: block;
    height: 50px;
    vertical-align: middle;
}

Demo