如何将内联块与文本垂直居中，底部没有空格？

Question

我想将所有元素垂直居中对齐，并使用正好50px的高度，但不知怎的，我有2个问题：

1. 项目使用的高度超过50px（绿色）
2. ＆＃34;＆gt;＆＃34;文字不是垂直居中的

---

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

Answer 2

为了在DIV中垂直居中一行文本，只需将line-height设置为等于div的高度，所以：

div
{
   line-height:50px;
}

要将div垂直居中于另一个div，最常见的技术是：

.logo 
{
    display:block;
    position:absolute;
    top:50%;
    margin-top:-25px;
}

因此，换句话说，从顶部偏移50％然后再将其向上推，并将负边距顶部设置为半框高度。