如何将内联块与文本垂直地放在一起，而底部没有空格？

Question

我想对齐所有垂直中心的元素，并使用50 to的高度，但不知何故，我有两个问题：

1. 这些项目使用的高度超过50 The (绿色)。
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示例：http://jsfiddle.net/pG4y6/

如何通过更改CSS?来实现这一点？

​

​

Answer 1

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

演示

Answer 2

为了使DIV中的文本行垂直居中，只需将行高设置为div的高度，因此：

div
{
   line-height:50px;
}

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

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

因此，换句话说，从顶部抵消50%，然后再推它的负边缘-顶部设置为半框的高度。