css - 将 UL 居中在 div 内。未知错误

Question

我知道有很多关于如何将 UL 置于 div 中的教程。我已经尝试了很多，但无法让它工作。我想我错过了一些东西。如果有人能看一下，我将不胜感激。

该网站是 http://elvina-marin.se/ 我想以某种方式将主菜单居中。

干杯。

Answer 1

您的菜单未居中，因为li它们浮动到left.

您在这里需要做的是将它们的显示从 切换block到inline-block并摆脱float. 这将使它们表现为文本，并且它们将遵循容器提供的对齐方式（the .gf-menu）。

.gf-menu {
    width:100%;
    text-align:center;
}
.gf-menu > li {
    float:none;
    display:inline-block;
    *display:inline; /* teaching ie7 and below to behave */
    zoom:1;
}

Answer 2

您在 html: 中为 ul 设置了两个类：<ul class="gf-menu l1 " >最后还留了一个空格。如果在单词之间放置空格，则可以为标签设置更多类。

尝试使用您的类之一在 CSS 中调用您的 ul 并设置：margin-left: 50%;

前任。：

.gf-menu
       {
      margin-left: 50%;
       }