Question

当我使用margin-top：50％时，

<div id="progressbarr">在其祖先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

您的保证金值是使用父元素宽度计算的。为什么？好问题。我不知道，但这里有一些关于这个主题的讨论： Why are margin/padding percentages in CSS always calculated against width?

以下是您的#col3wrap示例，宽度设置为： http://jsfiddle.net/Xdwhk/1/

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

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

以下是一种方法，使用position: relative和calc设置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;
}

<强> Demo

所有浏览器都不支持calc，因此我们必须退回。

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

1 个答案: