html - 垂直对齐带有 div block 内链接的文本

Question

无法通过链接将文本垂直居中，这是我的 html 代码:

<div style="background: #F7C0B9;width: 645px;height: 70px;margin: 0 auto;outline: 1px solid #FFF;text-align: center;vertical-align: middle;line-height: 70px;">
    <p style="">
        Text <br />
        <a href="#">
            Link
        </a>
    </p>
</div>

我试过指定垂直对齐，p 标签，也试过行高，但没有成功，链接仍然错位。

jsfiddle:http://jsfiddle.net/85q6wqjx/

Answer 1

您可以按如下方式实现此布局。

首先，将display: inline-block设置为p，这样你就可以将它与 内容框的基线。

其次，您需要将 p 中的 line-height 重置为一些合理的值 使行间距看起来正确的值。

第三，将 vertical-align: middle 应用于 p 元素，使其具有 想要的效果。

如所示，此方法适用于任意数量的文本行。

参见 fiddle :http://jsfiddle.net/audetwebdesign/1mwkbr0q/

.panel {
    background:#F7C0B9;
    width:645px;
    height:170px;
    margin:0 auto;
    outline:1px solid #FFF;
    text-align:center;
    line-height: 170px;
}
.panel p {
    vertical-align: middle;
    display: inline-block;
    border: 1px dotted gray;
    line-height: 1.25;
}

<div class="panel">
    <p>Text<br /> <a href="#">Link<br>a 3rd line for example</a></p>
</div>