在内嵌块中垂直居中文本?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (44)

我正在为使用样式超链接的网站创建一些按钮。我已经得到我想要的按钮,但是我无法文本垂直居中。

我如何去垂直居中链接文本

CSS:

.button {
    background-image:url(/images/categorybutton-off.gif);
    color:#000;
    display:inline-block;
    height:57px;
    width:100px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
}
.button:hover {
    background-image:url(/images/categorybutton-on.gif);
}
.button:before {
    content:"Click Here For\A";
    font-style:italic;
    font-weight:normal !important;
    white-space:pre;
}

HTML:

<a href="/" class="button">Link</a>
<a href="/" class="button">Link<br />More Details</a>
提问于
用户回答回答于

用一个span(居中)包裹你的文本

HTML:

<a href="..." class="button">
  <span class="Centerer"></span>
  <span class='Centered'>Link</span>
</a>

CSS

.Centered
{
    vertical-align: middle;
    display: inline-block;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

看看这里:http : //jsfiddle.net/xVnQ6/

用户回答回答于

扫码关注云+社区

领取腾讯云代金券