gpt4 book ai didi

html - 使用 CSS 简单地居中 DIV

转载 作者:行者123 更新时间:2023-11-28 06:53:16 27 4
gpt4 key购买 nike

我正在尝试做一些非常简单的事情,但在我的头撞到墙上后,我无法让包含我的导航菜单的 div 在容器内居中。如果您能看一看并告诉我为什么它不起作用,我将不胜感激。我在元素周围有一个 1px 的边框,因此您可以看到“导航”div 如何保持左对齐。

这是 jsfiddle 的链接: http://jsfiddle.net/glennw9/7vr7tovh/3/

html, body {
background-color:#F2EED6;
width:900px;
height:900px;
border: 1px solid #630800;
margin: 0px 0px 0px 0px;
}

#container {
/*border: 1px solid #630800;*/
width: 860px;
margin: 0 auto;
border: 1px solid #630800;
}


h1 {
font-size: 2.5em;
font-family: Georgia;
letter-spacing: 0.1em;
color: #630800;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
text-align: center;
}

div.nav {
margin-left: auto;
margin-right: auto;
display: inline-block;
border: 1px solid #630800;
text-align: center;
}
ul.nav {
width: 840
margin: 0 auto;
display: block;
}
ul.nav, li.nav {
list-style-type: none;
}
li.nav, a.nav {
background: #354178;
color: white;
font-family: Arial, Helvetica, sans-serif;
padding: 6px 10px;
text-decoration: none;
}
li.nav, a.nav:hover {
background: #4A5AA7;
display:inline;
}
li {
display:inline;
padding: 10px;
}
a.active {
background: white;
color: black;
border: 1px solid #CCCCCC;
}
<body>
<div id="container">
<h1>Edit Order Record</h1>

<div class="nav">
<ul class="nav">
<li><a class="nav" href="inv-main.php">Main Page</a>

</li>
<li><a class="nav" href="prod-view-paged.php">View Products</a>

</li>
<li><a class="nav active" href="order-view-paged.php">View Orders</a>

</li>
<li><a class="nav" href="cat-view.php">View Categories</a>

</li>
<li><a class="nav" href="#Bot">Go to Bottom</a>

</li>
</ul>
</div>
<br>
<br>
<br>
</body>

最佳答案

只需将 text-align: center; 添加到 #container 元素即可。

Here's a fiddle .

关于html - 使用 CSS 简单地居中 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33664013/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com