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相同高度的行高。

vertical-align属性可分为三个易于理解的步骤：



它仅适用于内联或内联块元素



它会影响元素本身的对齐方式，而不会影响其内容（应用时除外）   表格）



当它应用于表格单元格时，对齐   影响细胞内容，而不是细胞本身

请参阅Understanding CSS’s vertical-align Property

Answer 2

您需要设置行高，在底部添加行。

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;
    line-height:38px;
}

Answer 3

css代码看得很好但是vertical-align：middle;拼写错了。这个正确的拼写vertical-align：middle;

使用css将vertical-align设置为div

3 个答案: