Question

我想将我的ul容器放在我的div中。

所以我的div的宽度为100％，边距设置为自动。

对于ul它的宽度为98％，边距设置为自动

width: 98%;
margin: auto;
display: inline-block;
vertical-align: middle;

我遇到的麻烦是li没有居中，因此菜单与左边对齐。我想将它显示在中心位置

非常感谢任何帮助。

以下是我的网站http://www.barbarian-strongman28.fr/

的网址

Answer 1

ul.art-hmenu有浮动，在text-align:center中删除它（float：none）和.desktop-nav .art-nav-inner（并且需要98％的宽度）

这使整个ul表现得像一个单词（导致它显示：inline-block）....并与中心对齐（作为文本）。

Answer 2

相关的HTML如下：

<div class="art-nav-inner">
  <ul class="art-hmenu">
    <li> <a href="accueil.html" class="active"> accueil</a> </li>
    <li> <a href="calendrier-et-resultats.html" class="active"> 
           calendrier et résultats</a> </li>
    <li> <a href="multimedia.html" class="active"> multimedia</a> </li>
    <li> <a href="athletes.html" class="active"> athlètes</a> </li>
    <li> <a href="partenaires.html" class="active"> partenaires</a> </li>
    <li> <a href="contact.html" class="active"> contact</a> </li>
    <li> <a href="media-presse.html" class="active"> médias et presse</a> </li>
  </ul>
</div>

要使导航链接居中，请添加/修改以下CSS规则：

ul.art-hmenu
{
    text-align: center;
}

ul.art-hmenu li
{
    display: inline-block; /* float: left; no need to float the items */
}

当显示为内联块时，li元素可以在父级中居中元素使用text-align: center。

在我的div里面的中心ul

2 个答案: