Question

I need help in centering one DIV withing a DIV.

我想有一辆汽车宽度的集装箱DIV,来接收整个屏幕宽度(称为其头盔)。

内部主管集装箱,我想再增加三维:

A Left DIV (400px wide)
A Center DIV (100px wide)
A right DIV (200px wide).

我直接希望DIV在屏幕中间。现在,我只能把它放在左边和右DIV之间。

Thanks for any help.

Answer 1

<>CSS:

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

<>光>:

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

http://www.hchr.org。

守则:。

全面筛选:。

Answer 2

这一工作。

。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 3

你们可以做的是,在使双方平等的情况下,再增加一个四分之三,并设定了<条码>可见性:隐蔽性;(而不是<条码>显示:无);这样,它就会成为中间四分之一。

例如,在本案件中,有1@400px, 另有1 @ 100px, 另有1 @ 200px, 隐藏,@ 200px。

Regards, Richard

Answer 4

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

这一与该中心的超文本处理工作。页: 1 缩略语

.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/johnpa/9bN2p/“rel=“nofollow”>。 http://jsfiddle.net/johnpa/9bN2p/。

Answer 5

由于flex ,你可以使用现代解决办法。 cs3的概念。

.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>

友情链接