css - 使用 css 将垂直对齐设置为 div

Question

我有一个 <a>在 <div> 中标记我想要 <a> 中的文字成为vertical-align:middle;但它不起作用，文字在顶部。为什么？

CSS:

div.banner 
{
    margin-top: 20px;
    padding: 18px 24px 50px 69px;
    background:url(banner.jpg) top center no-repeat;
    width:106px;
    height:38px;
    text-align:left;
    word-wrap: break-word;
    vertical-align: middle;
}

div.banner a
{
    display: block;
    width: 118%;
    margin-left:-13px;
}

HTML:

<div class="banner">
  <a target="_blank" href="http://10.0.0.145/used-test-eq/bb_0">
    See All<br>used-test-eq
  </a>
</div>

我还想让文字在地平线的中心，怎么办？？

Answer 1

添加一个与div高度相同的line-height。

The vertical-align property can be broken down into three easy-to-understand steps:

• It only applies to inline or inline-block elements

• It affects the alignment of the element itself, not its contents (except when appliedto table cells)

• When it’s applied to a table cell, the alignmentaffects the cell contents, not the cell itself

参见 Understanding CSS’s vertical-align Property