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，这样您就可以将其对齐内容框的基线。

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

第三，将vertical-align: middle应用于p元素以使其具有。{1}} 期望的效果。

这种方法适用于任何数量的文本行，如图所示。

请参阅小提琴：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>

Answer 2

请删除<br>标记，以获得您想要的内容

并使用

更新您的代码段

 <div style="background:#F7C0B9;width:645px;height:70px;margin:0 auto;outline:1px solid #FFF;text-align: center;padding: 17px 0;box-sizing: border-box;">
            <p style="margin: 0;">Text</p>
             <a href="#">Link</a>

        </div>

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

Answer 3

如果你想在文本下面的链接，但仍然在中间：

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

JsFiddle

您的line-height将其推到div之外，而p是一个阻止元素阻止它进入。您需要将p设为inline-block元素。

如果您希望它们位于同一行，请从html中删除<br>。

JsFiddle

br是一个换行符和line-height效果。

Answer 4

只需将以下代码添加到您的css文件

即可

a {
    margin-top: -8%;
    display: block;
}

如果要添加样式特定锚标记

，则为锚标记提供class / id名称

垂直对齐文本与div块内的链接

4 个答案: