中心div的最小左边距

Question

是否有一种“css”方式使中心div表现得像是有一个最小的左边距？我希望一个居中的div以页面为中心，除非该页面的宽度小于某个值。如下所示：

.centred { width: 400px; margin: 0 auto; min-margin-left: 200px; }

我知道min-margin-left不存在，但我怎么能做到这一点？以下是图片中的示例。认为灰色边框是浏览器，蓝色框是我的“居中”div。

Answer 1

对于类似的内容，我们可以使用CSS Media Queries。

.centred { width: 400px; margin: 0 auto; }

@media screen and (max-width:800px) {
    .centred { margin-left:200px; }
}

在此示例中，所有宽度低于800px的设备都将获得200px margin-left。

没有媒体查询的替代解决方案

另一种解决方案是将您的内容显示为表格，并为包含的单元格提供200px的填充。

<div class="table">
    <div class="table-cell">
        <div class="content">
        </div>
    </div>
</div>

.table {
    display:table; /* Give our .table divider a table display */
    width:100%;    /* Set its width to 100% to fill the screen */
}

.table-cell {
    padding:0 200px;  /* 200px left and right padding, 0 top and bottom */
    display:table-cell; /* Give our .table-cell divider a table-cell display */
    vertical-align:middle; /* Vertically align content to the middle */
}

.content { /* This is our content box */
    width:100px;
    height:100px;
    background:#f00;
    margin:0 auto;
}

<强> JSFiddle Demo

如果你不确定我做了什么，这里是一个可视化（使用50px padding而不是200px）：

常规尺寸

注意调整结果窗口大小时填充的效果。

Answer 2

使用CSS媒体查询：

.centred {
    width: 400px; 
    margin: 0 auto;
}
@media only screen and (max-width : 600px) {
    .centred {
         margin-left: 200px; 
    }
}

根据需要调整最大宽度。

Answer 3

我认为您应该可以使用媒体规则执行此操作： https://developer.mozilla.org/en-US/docs/Web/CSS/@media

.centred {
    width: 400px;
    margin: 0 auto;
}
@media screen and (max-width: 600px) {
    .centred {
        margin-left: 200px;
    }
}