在容器中居中响应DIV [英] Centering responsive DIVs within a container

问题描述

如果调整屏幕大小， div 会响应并移动。当右手div下降时，它在屏幕右侧留下空间。我想让所有的 div 自动居中，而不是留在左边

我创建了这个JSFiddler来帮助解释但它不允许我发布与消息。

任何帮助？

解决方案

定心是非常困难的。尝试使用 display：inline-block ，然后在包装父项上添加 text-align：center 。

JSfiddle演示

CSS

  #wrapper {
 max-width：900px; 
 margin：0 auto; 
 text-align：center; / * add this * / 
} 
 
 .box-container {
 background：none repeat scroll 0 0 #FFFFFF; 
 // float：left; / * tremove this * / 
 display：inline-block; / * add this * / 
 margin：50px 5px 50px; 
 overflow：hidden; 
 position：relative; 
 width：185px; 
 box-shadow：0px 0px 5px #BBBBBB; 
 text-align：center; 
 text-decoration：none; 
  

}

If you resize the screen the divs are responsive and move. When the right hand div drops below, it leaves space to the right of the screen. I want all the divs to automatically center instead of staying to the left

I created this JSFiddler to help explain but it doesn't allow me to post with message. Will post below.

Any help?

解决方案

Using floats and centering is very difficult. Try using display:inline-block instead and add text-align:center on the wrapping parent.

JSfiddle Demo

Amended CSS

#wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align:center; /* add this */
}

.box-container { 
    background: none repeat scroll 0 0 #FFFFFF;
    //float: left; /*tremove this */
    display: inline-block; /* add this */
    margin: 50px 5px 50px;
    overflow: hidden;
    position: relative;
    width: 185px;
    box-shadow: 0px 0px 5px #BBBBBB;
    text-align:center;
    text-decoration: none;

}

这篇关于在容器中居中响应DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！