Question

我正在开发的页面顶部有一个导航栏。我希望某个<div>在栏中居中（这是另一个<div>）。使用CSS有一种简单的方法吗？我尝试使用像素，但在调整窗口大小时这不起作用。

我试图将其水平居中而不是垂直居中。

更新

我想要居中的<div>是一个<div>中的三个<div>之一。这是一个搜索栏。

下面是我想要的图像以及边距设置为自动的图像。（对不起，图像并没有准确显示我想要放置搜索栏的位置。我希望它放在左侧（在导航栏的中心位置）

alt text

Answer 1

将margin-right: auto; margin-left: auto;应用于内部<div>。请参阅this example。

Answer 2

#wrap { margin:0 auto; width:800px; }

如果您不想设置显式宽度，则必须使用替代方法。

Answer 3

有很多方法可以做到这一点，但这种简单的减少应该让你去... 这不适用于IE6及以下版本：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>Untitled</title>
   <style type="text/css">
        #nav {
            display: table;
            width: 100%;
        }

        #nav div {
            display: table-cell;
            background-color: red;
        }

        .menu1 {text-align: left;}
        .menu2 {text-align: right;}
        .site-search {text-align: center;}

    </style>
</head>
<body>
   <div id="nav">

      <div class="menu1">
         MENU ONE
      </div>

      <div class="site-search">
         SEARCH BOX
      </div>

      <div class="menu2">
         MENU TWO
      </div>

   </div>
</body>
</html>

您需要将后代元素的文本对齐重置为左侧或任何您需要的内容。

如果你需要IE6支持，你可以做一些......

<style type="text/css">
   #nav {
      border: 1px red solid;
      overflow: hidden;
      text-align: center;
   }

   .menu1 {
      float: left;
      width: 30%;
      text-align: left;
   }

   .menu2 {
      float: right;
      width: 30%;
      text-align: right;
   }

   .site-search {
      display: inline;
   }
</style>

根据您的情况，您可以使用默认情况下的第一个示例，并使用条件注释回退到IE6的第二个示例。

Answer 4

<div>
<div class="cen">
</div>
</div>

然后

.cen{
margin:auto;
}

这将水平居中对齐你的div

Answer 5

另一种未提及的方法是使用具有负余量的绝对定位。也可以跨浏览器工作，但需要明确的宽度。

<div class="parent-container"> <!-- this needs to have position: relative -->
    <div id="search">Search...</div>
</div>

这是CSS

.parent-container {
    position: relative; // this is so #search is positioned relatively to it's parent
}

#search {
    position: absolute;
    width: 250px; // note the explicit width
    left: 50%; // This moves the element 50% to the left
    margin-left: -125px; // This is exactly HALF of the elements width
}

如果您不太了解它，请告诉我，我会尝试添加更多信息。

<强>更新
另一种方法是使用table-cell方法as discussed here。

有没有一种简单的方法可以将<div>置于另一个<div>中，并使用css？</div> </div>

5 个答案: