Question

尝试将菜单文本放在中间。到目前为止没有运气，这里的人们证明是非常有帮助的。 :)文本对齐中心通常有助于解决此处出现的大多数问题。虽然没有帮助我。我做错了什么？

<header>
<div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<li><a href="http://www.wordpress.org">Contact Us</a></li>
</ul>
</div>
</header>

#navmenu {
    margin-left:auto;
    margin-right:auto;
    height:60px;
    width:836px;
}
#navmenu ul {
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-image: none;
}
#navmenu li {
    display: inline-block;
    margin-left:1px;
    background-color:#3D3D3D;
    width:49%;
    height:40px;
    color:#FFF
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
}

Answer 1

您是否尝试为table-cell的{{1}}属性提供inline-block（而不是display）？

我相信这会奏效。

Answer 2

如果文本总是在一行上，您可以通过使line-height与容器的高度相同来垂直对齐文本。

将line-height: 40px添加到您的li：

#navmenu li {
  ...
  line-height: 40px;
}

Answer 3

我很快从我的一个css文件中抓取了这个片段。

这用于创建右上角导航栏。

ul {
    position: absolute;
    top: 20px;
    right: 35px;

}

ul li {
    display: inline;
    text-transform: lowercase;
    text-align: right;
    padding-left: 10px;
}

希望有所帮助

Answer 4

如果要将整个菜单容器居中，请使用position：relative，然后应用margin：auto属性。如果你需要将各个链接居中，我希望给出宽度和文本对齐中心肯定会起作用，因为它是一个块。如果没有，您可以始终使用padding-left和padding-right来实现这一目标。但菜单项的宽度将根据其内容进行缩放。还有一件事，尝试给出像素而不是百分比并检查。希望这会对你有所帮助。

卡在垂直文本中对齐

4 个答案: