gpt4 book ai didi

html - Div 不会保持自动居中

转载 作者:太空宇宙 更新时间:2023-11-04 12:18:36 27 4
gpt4 key购买 nike

我一直在尝试修复红色 div 以像这样保持自动居中

http://i.imgur.com/hq7bng9.png

所以当左边的粉红色 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>

最佳答案

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

Updated Example

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

关于html - Div 不会保持自动居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28520128/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com