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

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元素，以使其具有所需的效果。

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

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

如果要添加样式特定锚标记，请将类/ id名称赋予锚标记