Question

嘿伙计我在顶部有一个代码笔链接，所以你们可以看到它。我几乎有中心框中心的问题。我怎么做。当我把它放在中心位置时，当我缩小浏览器时，中间框似乎偏向一边

这是我的代码

#box{
  border: 3px solid red;

}

#space{
  text-align: center;

}
#leftcolumn { 
  width: 300px; border: 1px solid red; float: left; margin: 40px;
  margin-right: 20px;

}
#rightcolumn { 
  width: 300px; border: 1px solid red; float: right; 
  margin: 40px; margin-left: 20px;

}
#mcolumn {
   width: 300px; border: 1px solid red; float: left; margin: 40px;

}
.clear {
   clear: both;
}

和我的HTML

<div id="box">
      <div id="space">       
            <div id="leftcolumn"><p>LEFT</p></div>
            <div id="rightcolumn"><p>RIGHT</p></div>
            <div id="mcolumn"><p>mcolomn</p></div>
            <div class="clear"></div>          
      </div>
  </div>

Answer 1

由于“浮动：左”规则，中间区块粘在一侧。要居中，它不需要浮动。您可以添加“自动”水平边距而不需要任何浮动，它可以正常工作。

以下是修改后的示例：http://codepen.io/anon/pen/pitod

（对于父容器有一个顶部填充的技巧，以避免顶部边距出现问题，但是你可以随心所欲地解决这个问题）

Answer 2

希望它会对你有所帮助，＃mcolumn现在是中心

 #mcolumn {
 width: 300px;
 border: 1px solid red;
 margin: 40px auto;
 display: inline-block;
 }

Demo

以CSS div为中心，中间有问题

2 个答案: