gpt4 book ai didi

css - 在 DIV 内水平居中 UL

转载 作者:太空狗 更新时间:2023-10-29 14:15:22 25 4
gpt4 key购买 nike

我有一个 div,里面有一个 ul,我想将 ul 居中放置在屏幕的水平位置。

元素的完整代码可以在这里找到:jsfiddle

我试过使用:

margin: 0 auto; /* After setting the width of course */
text-align: center; /* Ran out of ideas!! */

我也尝试过相对定位和设置 % 而不是 px,但这并没有给我屏幕的确切中心,而且,如果我向菜单添加更多元素,在包含这些元素后它不会居中(使用一个 %)。

我的完整代码在 jsfiddle 中供您修补。

为了方便起见,我在下面粘贴了一些(我认为是)相关代码:

CSS:

/* Main*/
ul#nav {
display: inline-block;
padding: 0px;
list-style-type: none;
white-space: nowrap;
position: relative;
top: 10px;
left: 10%; /* This is what im currently using, but as thought, it doesnt work as needed :(*/
border: 2px solid chocolate;
-moz-border-radius: 10px; /* Border Radius for Mozilla Firefox */
border-radius: 10px; /* Border Radius for everything else*/
}

ul#nav li {
float: left;
font-family: 'Myraid Pro', Arial, Helvetica, sans-serif; /*Use available font for menu */
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color: #ee8043; /*Background Colour for the <li>*/
padding: 5px; /* Padding for the LI */
-moz-border-radius: 8px; /* Border Radius for Mozilla Firefox */
border-radius: 8px; /* Border Radius for everything else*/

}

HTML:

        <div id="header">
<a href="index.html"><img id="logo" src="images/Dafne_Logo.png"/></a>

<div id="navbar">
<ul id="nav">
<li><a href="index.html" rel="home">Home</a></li>
<li class="menu_separator">|</li>
<li><a href="index.html">News</a></li>
<li class="menu_separator">|</li>
<li><a href="forums.html">Forums</a></li>
<li class="menu_separator">|</li>
<li><a href="signup4327.html?to=%252F">Signup</a></li>
<li class="menu_separator">|</li>
<li><a href="login4327.html?to=%252F">Login</a></li>
<li class="menu_separator">|</li>
</ul>
</div>

</div>

<div id="coloured_bar"></div>


所以基本上,我想将包含在#navbar 中的#nav 居中,#navbar 包含在#header 中。

最佳答案

text-align:center 添加到 #navbar div 应该可以做到这一点,因为您的列表是 inline-block

如果你想让它居中,你必须删除 left:10%

关于css - 在 DIV 内水平居中 UL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6793230/

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