Question

考虑在所有浏览器和屏幕分辨率中居中div。看到左侧50％的div宽度左边缘是相当常见但是将div完全包裹在一个包含div中会切断我div的背景。

我的div将在整个屏幕上展开，背景为浅灰色，内部div包含我的内容。

我尝试过使用百分比和像素，但无法让它在1920宽和1200宽的中央坐着。

css如下：

#default-upper-strap {

background-color: #ddd;
width: 109.61%;
margin-top: 25px;
z-index: 99999;
position: relative;
overflow: hidden;
padding-left: 23px;
margin-left: -8px;
max-width: 1920px;
}

#default-strap-left {
width: 810px;
height: 100%;
float: left;
margin-left: 21%;
}

Answer 1

为什么不从以下开始：

<div class="default-upper-strap">
    <div class="default-strap-left">Some content...</div>
</div>

body {
    margin: 0;
}
.default-upper-strap {
    background-color: #ddd;
    width: 100%;
    max-width: 1920px;
    margin: 25px auto 0 auto;
    padding-left: 0px;
}
.default-strap-left {
    width: 810px;
    height: 100%;
    margin: 0 auto;
    border-top: 1px dashed blue;
}

使用margin: 0 auto将子元素置于父容器中心。

当父容器达到其最大宽度时，margin: 25px auto 0 auto规则如果这是您想要的，将负责处理父容器的居中。

请参阅演示：http://jsfiddle.net/audetwebdesign/JqxY8/

Div显示在页面的中心，背景伸展

1 个答案: