Question

我正在网站上工作，该网站有一个菜单，我在IE11上工作时遇到了一些问题，但是现在我遇到了一个新问题。

我希望“菜单项”（<li>项目）中的文字位于中间。

我做了fiddle

我给.menu-main-container一个75px的高度，但在网站上它的高度可变。

最终我希望中心的文本和<a>元素具有与.menu-main-container元素相同的高度，以便为子菜单设置样式（不包括在小提琴中）不是问题）

我无法使用table和table-cell样式

编辑：注意：这必须适用于所有浏览器！

HTML

<div class="menu-main-container">
    <ul id="menu-main" class="menu">
        <li id="menu-item-1"> <a href=#>Item1</a>

        </li>
        <li id="menu-item-2"> <a href=#>Item2</a>

        </li>
        <li id="menu-item-3"> <a href=#>Item3</a>

        </li>
        <li id="menu-item-4"> <a href=#>Item4</a>

        </li>
    </ul>
</div>

CSS

.menu-main-container {
    height: 75px;
}
#menu-main {
    padding : 0;
    margin : 0;
    white-space : nowrap;
    font-size : 0;
    position : relative;
    height : 100%;
}
#menu-main * {
    font-size : 16px;
    list-style-type : none;
    padding : 0;
    margin : 0;
}
#menu-main a {
    text-transform : capitalize;
    text-decoration : none;
    color : #000000;
    display : block;
}
#menu-main > li {
    display : inline-block;
    width : 16.6%;
    text-align : center;
    float : left;
    height : 100%;
}
#menu-main > li:hover {
    background-color : #003cb3;
}

Answer 1

您需要将line-height: 75px添加到a元素。

FIDDLE

Answer 2

试试这个。

#menu-main a {
    text-transform: capitalize;
    text-decoration: none;
    color: #000000;
    display: block;
    float: left;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 24px 0;
    }

Answer 3

更新＆＃34;＃menu-main a＆＃34;的CSS规则到下面：

#menu-main a {
color: #000000;
display: block;
position: relative;
text-decoration: none;
text-transform: capitalize;
top: 50%;
transform: translate(0%, -50%);}

它会自动拾取容器的高度。

Answer 4

见demo：`http://jsfiddle.net/alihesari/1adsca8u/

我删除 .menu-main-container 类的height: 75px;和 li标记中的 padding-top，padding-bottom

更新您的css代码：

.menu-main-container {
    border:1px solid #ccc;
    display: table;
    width:100%;
}

#menu-main > li {
    display : table;
    width : 16.6%;
    text-align : center;
    float : left;
    height : 100%;
    padding-top:28px;
    padding-bottom:28px;
    max-height:75px;
}

如何在锚元素中对齐文本

4 个答案: