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>

我尝试了以下内容：

line-height：75px：不适用于多行文字
display：table和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 Demo

<强> CSS ：

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

使用标记在div中垂直居中多行文本

2 个答案: