gpt4 book ai didi

css - 元素水平居中

转载 作者:太空宇宙 更新时间:2023-11-04 13:29:28 24 4
gpt4 key购买 nike

有很多情况水平居中不起作用。我检查了很多解决方案,但没有一个适合我。我有两个包装器,我使用 margin: 0 auto;这里为了清楚说明,您可以在此处查看 jsfiddle:http://jsfiddle.net/JdtKV/

width: 100%,它有效。实际上我想要一个固定长度的 block 留在中间底部。

在我开发的过程中,这里类似的代码还有一个问题: Different CSS bottom placement for Firefox and Chrome with table

这是我的 html:

<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<link href="test.css" rel="stylesheet">
</head>
<body>
<div class= 'container border'>
<div class="container-content border">
I should be in the middle
<div class="container-content-bottom border">
I also want go to middle
</div>
</div>
</div>
</body>
</html>

和这里的CSS:

html, body{
height:100%;
min-height: 100%;
}
.container{
display: table;
height:100%;
width: 100%;
}

.container-content{
display: table-cell;
position: relative;
vertical-align: middle;
text-align: center;
}

.container-content-bottom{
margin:0 auto;
position: absolute;
bottom: 0;
}

.border{
border: solid 1px #00f;
}

最佳答案

如果你想继续使用“position: absolute”,你可以为“left”定义一个值来使container-content-bottom div居中。

.container-content-bottom{
width:50%;
position:absolute;
bottom:0;
left:25%;
}

从那里您可以为 div 定义宽度并更改 left 的值直到它居中。

http://jsfiddle.net/JdtKV/2/

您也可以只添加“width: 100%;”如果这是您正在寻找的结果。

.container-content-bottom{
width:100%;
position:absolute;
bottom:0;
}

关于css - 元素水平居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23455209/

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