html - css 菜单文本对齐

Question

我需要在此菜单中将文本居中对齐，但我做不到。

#mimenu a {
    display: inline-block;
    width: 130px;
    height: 50px;
    background-color: #3D2F2F;
    text-align:center;
    color:white;
    margin-top:20px;
    background-color:#3d2f2f;
    -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.75);
    vertical-align:top;
    padding-top:10%;
    margin-right:10px;
}

http://jsfiddle.net/79epfyut/

Answer 1

您可以将包含的 li 设为 display: table 元素，并将 anchor 设为 display: table-cell。

这将允许您轻松地将 anchor 的 vertical-align 属性设置为 middle:

Updated Fiddle

虽然这改变了一点你的视觉风格，并且可能需要一些调整......

编辑

要保留填充，请在容器 li 上设置它:Fiddle with padding