html - 带有标签的 div 中的多行文本垂直居中

Question

我正在开发一个菜单系统，该系统由 div（宽度：275px，高度：75px，边框：1px 实心）组成。我希望整个 div 都是可点击的，我使用 a 标签和 display:block 属性（参见下面的代码）。一些菜单项是多行文本，但我无法垂直对齐它们。基本代码是：

.div {   
    width: 275px;
    height: 75px;
    border: 1px solid #000; 
    text-align: center;
    float: right;
}

<div class="div">
    <a style="display: block; width: 100%; height: 100%" href="#">link..</a>
</div>

我尝试了以下方法：

1. line-height: 75px: 这不适用于多行文本
2. display: table and vertical-align: middle 不适用于 -tag 的 100% 宽度和高度。

我真的用包装器 div、表格等尝试了很多其他代码，但没有成功。否则，我不想使用 javascript (onclick="location.href")。

谢谢！

Answer 1

你可以用你已经尝试过的方法来做到这一点：'display:table-cell; vertical-align: middle;'，您只需将高度设置为 75px 而不是 100%。

Answer 2

使用 display:table-cell，实现垂直居中的多行文本。

JSFiddle 演示

CSS：

div {   
    width: 300px;
    height: 200px;
    border: 1px solid #000; 
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}