1

是否可以在不知道容器高度的情况下垂直居中？

我试过 display:inline-block 和 vertical align: middle 但它不起作用。我究竟做错了什么？

在这里检查：http: //jsfiddle.net/dSq2n/

HTML：

<div class="wrap">
    <div class="red1"></div>
    <div class="red2"></div>

    <div class="text">
        first<br>
        second<br>
        third<br>
        forth
    </div>
</div>

CSS：

.wrap{
    position:absolute;
    top:10px; left:10px;
    width:200px;
    text-align:center;
    background:grey;
}

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    display:inline-block; /* ? */
    vertical-align: middle; /* ? */
    background:red;
}

.red1{
    left:0px;
}
.red2{
    right:0px; top:0px;
}
4

5 回答 5

1

假设您想将红色框垂直居中，是的，这是可能的。但是您确实需要知道这些盒子的高度（您需要知道）。只需使用以下属性：

top: 50%;
margin-top: -10px; // half the height of the element

演示：http: //jsfiddle.net/dSq2n/2/

于 2013-05-02T11:14:12.903 回答
1

你正在使用position: absolute;所以使用vertical-align没有用，这样做

演示

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    background:red;
    top: 50%;
    margin-top: -10px;
}

您还需要从中top: 0;删除

.red2{
    right:0px;
}

解释：我们在这里所做的是，使用top: 50%;将元素降低 50%；但这不是完全居中的，所以我们减去你想要垂直居中的元素总高度的-10px;1/2margin-top

于 2013-05-02T11:14:21.050 回答
1

习惯了这个 css

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    top:50%;margin-top:-10px;
  margin-top:-10px;
    background:red;
}
.red1{left:0;}
.red2{right:0;}

消除 display inline-block

演示

于 2013-05-02T11:14:39.153 回答
1

这是解决方案试试这个检查这个小提琴http://jsfiddle.net/sarfarazdesigner/dSq2n/6/

.red1, .red2{
    position:absolute;
    width:20px; height:20px;
    display:block; /* how you want to display */
    top:50%; /* give position from top */
    margin-top:-10px; /* put  minus margin from top formula is total height/2 */
    background:red;
}

.red1{
    left:0px;
}
.red2{
    right:0px;
}
于 2013-05-02T11:20:03.197 回答
0

你不能使用position:absolute然后说vertical-align:middle

于 2013-05-02T11:15:23.407 回答