css - 如何在底部没有空格的情况下将内联 block 与文本垂直居中？

Question

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

1. 元素使用超过 50px 的高度(绿色)
2. “>”文本未垂直居中

---

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 实现此目的？

Answer 1

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

Demo