Question

我一直试图修复红色div以保持自动居中，就像这样

所以当左边的粉红色div变大或变小时，右边的红色div总是居中，但似乎不想留下来，如果有人能帮忙我会非常感激，非常感谢你，http://jsfiddle.net/f4woL4h2/

<!DOCTYPE html>
<html>

<head>
<style>
.informationbox {
position: relative;
width: 50%;
background-color:green;
overflow: hidden;
}
.left {
width: 50%;
float: left;
background-color: pink;
}
.right {
width: 50%;
float: right;
text-align: right;
background-color: red;
vertical-align:middle;
</style>
</head>

<body>
<div class="informationbox">
    <div class="left">
        Left Filler Line #1<br />Left Filler Line #2<br />Left Filler Line #3<br />Left Filler Line #4<br />Left Filler Line #5
    </div>
    <div class="right">
        Right Filler
    </div>
</div>
</body>

Answer 1

One approach将相对定位父元素，然后将子元素50%从顶部绝对定位。然后transform: translateY(-50%)用于垂直居中。这将适用于动态变化的高度，因此它应该始终有效。

Updated Example

.informationbox {
    position: relative;
}
.right {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

Answer 2

如果您可以在右侧div中的文本周围添加一个div，则可以使用此CSS：

.informationbox {
    position: relative;
    width: 50%;
    background-color:green;
    overflow: hidden;
    display:table;
}
.left {
    width: 50%;
    background-color: pink;
}
.right {
    width: 50%;
    text-align: right;
}
.left, .right {
    display:table-cell;
    vertical-align:middle;
}
.right div {
    background-color: red;
}

<div class="informationbox">
    <div class="left">Left Filler Line #1
        <br />Left Filler Line #2
        <br />Left Filler Line #3
        <br />Left Filler Line #4
        <br />Left Filler Line #5</div>
    <div class="right">
        <div>Right Filler</div>
    </div>
</div>

Div不会保持自动居中

2 个答案: