Question

我有（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 {}

我希望能够将li.nav与中心对齐而不使用文字对齐或边距，因为我同时使用了float:left和float:right，因此{{1}如果使用它们将被推出。

希望你能提供帮助，谢谢。

Answer 1

使用绝对定位：

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的LEFT侧定位在#navbar的中间。通过使用li.nav的一半宽度作为负边距，整个元素位于正确的中心。

只是一个简单的例子，它是如何工作的。您还可以在nav_left和nav_right周围创建容器元素，并在那里使用position：absolute。在容器元素内，您可以使用float作为nav_left和nav_right元素。

http://jsfiddle.net/jCCL7/5/

Answer 2

在CSS中，最好练习使用＆＃34;包装器/容器div＆＃34;。将所有div放在此包装器div

中

.wrapper {
    width: 500px;
    margin: 0 auto;
}

因此，您的HTML结构应该看起来（不一定非常精确）。

  <body>
     <div class="wrapper">
        <div class="header">
            <div class="content">
             <p>"HelloWorld"</p>
            </div>
        </div>
     </div>
  </body>

上面的代码会在您网页的中心显示您的所有HTML内容。

如何在不使用边距或文本对齐的情况下将元素对齐到中心

2 个答案: