Question

目前我试图让2个div在中心对齐，但不太确定如何做到这一点。它们默认转到左侧。

我有左边距：14％并且会在中心对齐它，但是当你重新调整窗口大小时，它看起来会很奇怪，因为它与右边对齐。

尝试使用marign-left / right：auto，但没有结果。

HTML

<div id="panels">

<div id="panel-left">           
</div>

<div id="panel-right">  
</div>

css

#panels{
padding-top:15px;
margin-left: auto;
 margin-right: auto;
}

#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:white;
float:left;
padding-left:25px;
height:473px;
}

#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:white;
float:left;
padding-left:25px;
}

Answer 1

试试这个：

<强> CSS

#panels{
    padding-top:15px;
    text-align:center;
    display: block;
}

#panel-left{
    width:32%;
    min-width:209px;
    overflow:hidden;
    background-color:black;
    height:473px;
    display: inline-block;
}

#panel-right{
    width:32%;
    min-width:209px;
    height:473px;
    background-color:orange;
    display: inline-block;
}

<强> DEMO HERE

Answer 2

尝试这种风格，我使用了box sizing css属性来处理内联样式期间发生的固有1px空间。

<强> Fiddle here

当然，您的初始代码中有一个未关闭的div元素，现在已修复。

所以CSS看起来像，

#panels {
    padding-top:15px;
    margin: 0 auto;
    background: cyan;
    width:50%; /* u need this */
    height:500px;
}
#panel-left {
    width:50%;
    box-sizing:border-box;
   /* min-width:209px;   By doing this you are pretty much giving the width to be 100 % */
    overflow:hidden;
    background-color:gray;
    float:left;
    padding-left:25px;
    height:473px;
    border:1px solid #000;
}
#panel-right {
    width:50%;
    box-sizing:border-box;
    /*min-width:209px;*/
    height:473px;
    background-color:white;
    float:left;
    padding-left:25px;
    border:1px solid #000;
}

代码段::

#panels {
  padding-top: 15px;
  margin: 0 auto;
  background: cyan;
  width: 50%;
  /* u need this */
  height: 500px;
}
#panel-left {
  width: 50%;
  box-sizing: border-box;
  /* min-width:209px;   By doing this you are pretty much giving the width to be 100 % */
  overflow: hidden;
  background-color: gray;
  float: left;
  padding-left: 25px;
  height: 473px;
  border: 1px solid #000;
}
#panel-right {
  width: 50%;
  box-sizing: border-box;
  /*min-width:209px;*/
  height: 473px;
  background-color: white;
  float: left;
  padding-left: 25px;
  border: 1px solid #000;
}

<div id="panels">
  <div id="panel-left">left</div>
  <div id="panel-right">right</div>
</div>

希望这会有所帮助。 快乐编码：）

在中心对齐div中有2个div

2 个答案: