0

我有一个包装数量为 300 x 300 的大 div。当浏览器全屏时，包装器位于中心。但是当我调整浏览器的大小时，内容流到第二行，但包装器占据了 100% 的窗口。例如，浏览器窗口的宽度是 800 像素，内容是 4 块 300 像素 x 300 像素，所以两个块加起来只占 600 像素，另外两个在第二行。我的问题是包装器拉伸到 800px 并且内容位于屏幕的左侧，我希望它位于中心（当我使用 float:left 时）当我使用 display:inline-block 和 text-align:center 尝试相同时，即使包装器拉伸到 100% 的宽度，我也可以让内容在屏幕中居中。问题 1。

简化的小提琴您可以看到，如果窗口很小，第三个橙色框会落在第二行但居中。当我使用 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;

}
4

0 回答 0