html - 使用标签在 div 中垂直居中多行文本

Question

我正在开发一个由 div(宽度:275px，高度:75px，边框:1px 实线)组成的菜单系统。我希望整个 div 都可以点击，我用一个标签和 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. 行高:75px:不适用于多行文本
2. display: table 和 vertical-align: middle 不适用于标签的 100% 宽度和高度。

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

谢谢!

Answer 1

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