html - 为什么 div 内的 div 不能很好地定位

Question

<div id="progressbarr">当我使用 margin-top :50% 时，它仍然没有很好地包裹在它的祖先 div 中，并期望它将水平放置在中间。

HTML 框

css

#col3wrap{
    height: 50px;
    background: #DDD;
}

.profilepic {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 0 10px 0 0;
}

#progressbarr {
    float: left;
    width: 300px;
    height: 20px;
    background: #eee;
    margin: 50% 0 0 0;
}

#progressbarr > div {
    background-color: green;
    width: 40%;
    height: 20px;
}

http://jsfiddle.net/Xdwhk/

Answer 1

您的边距值是使用父元素宽度计算的。为什么？好问题。我不知道，但这里有一些关于该主题的讨论： 为什么 CSS 中的边距/填充百分比总是根据宽度计算？

这是您#col3wrap设置宽度的演示：http: //jsfiddle.net/Xdwhk/1/

尝试调整宽度以查看 margin-top 值如何随它变化。

因此，除了使用 margin-top 之外，您将不得不找到一种不同的方法来垂直居中您的进度条。

这是一种方法，使用position: relativeandcalc设置top值：

CSS

#col3wrap{
    height: 50px;
    background: #DDD;
    position: relative;
}

.profilepic {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 0 10px 0 0;
}

#progressbarr {
    float: left;
    width: 300px;
    height: 20px;
    background: #eee;
    position: relative;
    top: 30%;
    top: -webkit-calc(50% - 10px);
    top: calc(50% - 10px);
}

#progressbarr > div {
    background-color: green;
    width: 40%;
    height: 20px;
}

演示

注意calc并非所有浏览器都支持，所以我们必须有一个后备。