垂直對齊文本與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名稱賦予錨標記