Question

我有一个包装数量大的300乘300 div。当浏览器处于全屏状态时，包装器位于中心。但是当我调整浏览器的大小时，内容会流到第二行，但是包装器会占用100％的窗口。例如，浏览器窗口宽度为800px，内容为4块300px乘300px，因此两个块一起仅占600px，另外两个块位于第二行。我的问题是包装器延伸到800px，内容位于屏幕左侧，我希望它在中心（当我使用float：left时）当我尝试使用display：inline-block和text-align：center时，即使包装器拉伸到宽度的100％，我也可以将内容放在屏幕中心。问题1。使用这个解决方案的是，如果最后一行中只有一个块而不是中间位于中间，则第二个问题是移动浏览器计数font-size：0以某种方式不同，因此它有点不对齐。

简化fiddle你可以看到，如果窗口很小，第三个橙色框会落到第二行但是居中。当我使用text-align：left时，所有框都在左侧，在右边留下很大的空间。

这是我在网站上的相关CSS：

#site-wrapper {
    min-height:100%;
    text-align: center;
    position:relative;
}

#container {
   position:relative;
   width: auto;
   margin: 0 auto;
   display: inline-block;
   padding-bottom:40px;   /* Height of the footer */
}

div#content-wrapper{
   padding:5px 0 5px 0;
   font-size: 0;
   text-align: center;
   margin-left: auto;
}

#column1, #column2, #column3 {
    margin-right: 5px;
}
#column-last{
    margin-right: 5px;
}
div.column {
    //float: left;
    display: inline-block;
    vertical-align: top;
    font-size: 0;

}
.item {
    background: #0072C6; 
    width: 20em;
    padding: 5px;
    height: auto;
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #FFF;
    box-shadow: inset 0 0 100px #1082D6;

}

如何使用浮动内容居中包装

0 个答案: