1

我有一个<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>

另外我希望文本位于地平线中心，如何？

4

3 回答 3

1

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

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

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

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

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

请参阅了解 CSS 的 vertical-align 属性

于 2012-07-12T13:07:17.677 回答
0

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

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;
}
于 2012-07-12T13:03:54.887 回答
0

看到的 css 代码没问题，但垂直对齐：中间；拼写错误。这个正确的拼写vertical-align:middle;

于 2012-07-12T13:10:15.537 回答