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

无法使用链接将文本垂直居中，这是我的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标记，也尝试过线条高度，但没有成功，链接仍然不在正确的位置

---

jsIDLE:

请删除

标签，您将得到您想要的

并使用

 <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>

文本

---

如果您希望链接位于文本下方，但两者仍位于中间：

<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>

文本

您的

行高度

将其推到

div

之外，而

p

作为块元素阻止其向下移动。您需要使

p

成为

内联块

元素

---

如果希望它们都位于同一行，请从html中删除

---

br

是一个换行符，

行高

受此影响。

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

首先，将

display:inline block

设置为

p

，这样您就可以将其与 内容框的基线

其次，您需要将

p

内的

行高度重置为合理的值
值以使行距看起来正确

第三，对
p
元素应用
verticalalign:middle
，使其具有
预期效果

这种方法可以处理任意数量的文本行，如图所示

参见小提琴：


.panel{
背景：#F7C0B9；
宽度：645px；
高度：170px；
保证金：0自动；
外形：1px实心#FFF；
文本对齐：居中；
线高：170px；
}
.p.小组{
垂直对齐：中间对齐；
显示：内联块；
边框：1px点灰色；
线高：1.25；
}

文本

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

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

如果您想添加样式特定的锚定标记，请为锚定标记指定class/id名称
您使用的浏览器在Chrome中似乎很好，因为我可以看到请注意，如果您添加更多行，这不起作用：OP没有说明这必须适用于多行。另外，如果OP删除了设置的高度，它将起作用@Sirence@Sirence（将文本放入
p
！你没有在小提琴中！）链接必须位于新行。