通过CSS和HTML无法使Div容器居中

Question

通过CSS和HTML无法使Div容器居中

6

我正在尝试弄清楚为什么这个div不能居中。如果我能让它正常工作，那就好了。

body{
    margin:0;
    overflow: hidden;
}

ul{
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    margin: 0 auto;
    width:60%;
    text-align:center;  
}

ul li{
    text-transform:uppercase;
    float:left; 
}

ul li a{
    display: block;
    width: 120px;
    text-decoration:none;
    background-color:#98bf21;
    text-align:center;
    margin:0px;
    padding:10px;
    font-weight:Bold;
    color:#fff;
    font-family:Arial;
    letter-spacing: 1px;
}

ul li a:hover{
    background-color:#7A991A;
}

#container{
    width:100%;
}

<div id = "container">
    <ul>
        <li><a href = "#">Home</a></li>
        <li><a href = "#">News</a></li>
        <li><a href = "#">Contact</a></li>
        <li><a href = "#">About</a></li>
    </ul>
</div>

每当我尝试在浏览器中显示它时，它看起来像这样：

还有，如何将导航栏拉伸到100%？就像从页面的最左边一直延伸到右边。

- Jordan Brown

4个回答

2

1、将ul中的margin: 0 auto;width:60%;删除，并改为display: table;margin: 0 auto;，如下所示：

ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    /* margin: 0 auto;
    width:60%; */
    display: table;
    margin: 0 auto;
}

2、从ul中删除margin: 0 auto;width:60%;，在#container中添加‘text-align:center’，在ul中添加‘display:inline-block’，如下所示：

#container{
    width:100%;
    text-align: center;
}

ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    display: inline-block;
}

3、

#container{
    width:100%;
    position: relative;
}
ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

4、

 #container{
    width:100%;
    display: flex;
    justify-content: center;
} 
ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
}

5、

#container{
    width:100%;
    display: flex;
}
ul{
    display:inline-block;
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    margin: 0 auto;
}

也许可以帮到您。选择最适合您项目的那一个。

- 李明洋

0

这是你要找的吗？

我所做的只是将背景颜色移到了 #container 中，移除了 60% 的宽度，并使 LI 元素显示为 inline-block。

ul li{
    text-transform:uppercase;
    display: inline-block;
}

https://jsfiddle.net/391sz22s/1/

- Himechi90

有人刚刚回答了。谢谢..虽然很接近，但只是ul{}。 - Jordan Brown

哈哈，不用担心 :) 祝你好运！ - Himechi90

0

这是一种实现的方法。

将 display: table 设置给 ul 元素，这将使其成为一个自适应宽度的块级元素，并使用 margin: 0 auto 居中。

在 li 元素上设置 display: table-cell。

这种方法的优点是，无论页面宽度多小，链接都会保持在同一行上，这可能是某些设计所期望的效果。

你可以将 ul 的宽度设置为 100%，但这样会导致链接元素的宽度增加，这可能不是你想要的效果。

ul {
    list-style-type:none;
    overflow:hidden;
    padding:0px;
    margin: 0 auto;
    width: auto;
    display: table;
}
ul li {
    text-transform:uppercase;
    display: table-cell;
}
ul li a {
    display: block;
    width: 120px;
    text-decoration:none;
    background-color:#98bf21;
    text-align:center;
    margin:0px;
    padding:10px;
    font-weight:Bold;
    color:#fff;
    font-family:Arial;
    letter-spacing: 1px;
}
ul li a:hover {
    background-color:#7A991A;
}
#container {
    width:100%;
}

<div id="container">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

- Marc Audet

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Naourass Derouichi · Accepted Answer

您想要居中一个没有指定宽度的 div。为此，首先删除 ul{width:60%;}，然后将 text-align:center 添加到父元素中，将 display:inline-block 添加到子元素中：

#container{
    text-align:center;  
}
ul{
    display:inline-block;   
}

body{
 margin:0;
 overflow: hidden;
 }
 
ul{
 list-style-type:none;
 overflow:hidden;
 padding:0px;
 margin: 0 auto;
 text-align:center;
 display:inline-block; 
}

ul li{
 text-transform:uppercase;
 float:left; 
}

ul li a{
 display: block;
 width: 120px;
 text-decoration:none;
 background-color:#98bf21;
 text-align:center;
 margin:0px;
 padding:10px;
 font-weight:Bold;
 color:#fff;
 font-family:Arial;
 letter-spacing: 1px;
}

ul li a:hover{
 background-color:#7A991A; 
}

#container{
 width:100%;
    text-align:center;  
}

<body> 
  <div id = "container">
    <ul>
   <li><a href = "#">Home</a></li>
   <li><a href = "#">News</a></li>
   <li><a href = "#">Contact</a></li>
   <li><a href = "#">About</a></li>
    </ul>
  </div>
</body>