0

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

<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;
}
4

4 回答 4

0

您是否尝试过给予table-cell（而不是inline-block）display财产#navmenu li？

我相信这会奏效。

于 2013-08-06T03:58:24.350 回答
0

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

添加line-height: 40px到你的李：

#navmenu li {
  ...
  line-height: 40px;
}
于 2013-08-06T04:02:55.530 回答
0

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

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

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

}

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

希望有帮助

于 2013-08-06T04:08:57.960 回答
0

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

于 2013-08-06T04:29:38.117 回答