我有 ( jsfiddle ):
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
</ul>
</div>
</body>
我有:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
width:100%;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
text-align:center;
}
ul.nav {
margin:0;
padding:0;
list-style-type:none;
}
li.nav_left, li.nav_right, li.nav {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {}
我希望能够在不使用 text-align 或 margin 的情况下将 li.nav 对齐到中心，因为我同时拥有 float:left 和 float :right 正在使用，所以 float:right 如果被使用，将被推出。
希望能帮到你，谢谢。
最佳答案
使用绝对定位:
html, body {height:100%;margin:0;padding:0;font-size:12px;}
body {background:#F1F1F1;}
#navbar {
position:relative;
width:100%;
height:50px;
padding:5px 0;
overflow:auto;
background:#34495e;
border-bottom:solid 1px #222;
}
ul.nav {padding:0;list-style-type:none;}
li.nav_left, li.nav_right {padding:0 5px;}
li.nav_left {float:left;}
li.nav_right {float:right;}
li.nav {
background-color:green;
width:200px;
height:30px;
position:absolute;
margin:-15px 0 0 -100px;
top:50%;
left:50%;
text-align:center;
}
您需要重新安排您的 html 代码:
<body>
<div id="navbar">
<ul class="nav">
<li class="nav_left"><a class="nav" href="#">Home</a></li>
<li class="nav_left"><a class="nav" href="#">Support</a></li>
<li class="nav_right"><a class="nav" href="#">Login</a></li>
<li class="nav_right"><a class="nav" href="#">Register</a></li>
<li class="nav">
<form class="nav" method="post" action="action.php?do=search">
<input class="search_bar" type="text" name="search_input" />
</form>
</li>
</ul>
</div>
</body>
上面的代码将 li.nav 的左侧定位在#navbar 的中间。通过使用 li.nav 宽度的一半作为负边距，整个元素定位在精确的中心。
只是一个简单的例子，它是如何工作的。您还可以围绕 nav_left 和 nav_right 创建容器元素，并在那里使用 position:absolute 。在容器元素内，您可以为 nav_left 和 nav_right 元素使用 float 。
关于html - 如何在不使用边距或文本对齐的情况下将元素居中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21649213/