Question

我需要帮助将DIV集中在一个DIV上。

我希望有一个自动宽度的容器DIV占据整个屏幕宽度（让我们称之为headerContainer。

在headerContainer中，我还想要3个DIV：

左DIV（400px宽）
中心DIV（100px宽）
右侧DIV（200px宽）。

我希望中心DIV直接位于屏幕中间。现在我只能让它在左右DIV之间居中。

感谢您的帮助。

Answer 1

这很有效。

.headerContainer{
  width:auto !important;
}
.leftDiv{
  float:left;
  width:400px;
}
.rightDiv{
  float:right;
  width:200px;
}
.centerDiv{
  display:inline;
  width:100px;
  margin-left:auto;
  margin-right:auto;
}

<div class="headerContainer">
 <div class="leftDiv"></div>
 <div class="centerDiv"></div>
 <div class="rightDiv"></div>
</div>

Answer 2

<强> CSS：

.leftDiv{
  float: left;
  width: 400px;
}
.rightDiv{
  float: right;
  width: 200px;
}
.centerDiv{
  width: 100px;
  margin: 0 auto;
}

<强> HTML：

<div>
   <div class="leftDiv">left</div>
   <div class="rightDiv">right</div>
   <div class="centerDiv">center</div>
</div>

<强>样本：

代码：http://jsfiddle.net/Xxwrm/6/

全屏：http://jsfiddle.net/Xxwrm/6/show

Answer 3

你可以做的是在末尾添加另一个div，使双方都相等，然后设置visibility: hidden;（不是display: none;）;这样它就会使中间div居中。

例如，在这种情况下，你有一个@ 400px，另一个@ 100px，另一个@ 200px和另一个，隐藏，@ 200px。

此致理查德

Answer 4

<div class="headerContainer">
 <div class="leftDiv">left</div>
 <div class="rightDiv">right</div>
 <div class="centerDiv">center</div>
</div>

这个带有此CSS的HTML将有效。我对DIV进行着色以使其显而易见。

.headerContainer{
  width:auto;
}
.leftDiv{
  float:left;
  width:400px;
  background:pink;
}
.centerDiv{
  width:100px;
/*
  margin-left:auto;
  margin-right:auto;
*/
  margin:0 auto;
  background:cyan;
}
.rightDiv{
  float:right;
  width:200px;
  background:lightgray;
}

但是，如果屏幕不是700px宽，则会有一些包装。

这也是一个小提琴：http://jsfiddle.net/johnpapa/9bN2p/

Answer 5

由于css3的flex概念，您可以使用现代解决方案。

.parent {
  display: flex;
  height: 300px;
  /* Or whatever */
  background-color: green;
}
.child {
  width: 100px;
  /* Or whatever */
  height: 100px;
  /* Or whatever */
  margin: auto;
  /* Magic! */
  background-color: yellow;
}

<div class="parent">
  <div class="child ">Div1</div>
</div>

DIV中的中心DIV？

5 个答案: