gpt4 book ai didi

html - css响应中的垂直对齐

转载 作者:搜寻专家 更新时间:2023-10-31 21:53:55 25 4
gpt4 key购买 nike

这个问题可能是一个有答案的问题,但听起来可能很愚蠢。我想对齐任何元素,无论是文本、图像还是 div 以垂直居中对齐,它也应该在响应式屏幕中工作。我确实通过添加带有手动百分比的 margin-top 来尝试它。我想知道是否有一种简单且最好的方法来使垂直对齐响应。

我什至在谷歌上做了一些研究,其中一些人建议将容器的显示属性更改为表格,将 div 更改为表格单元格,然后使用垂直对齐作为中间。这听起来很简单,但它也会影响页面中我不想作为表格的其他元素。因此,我正在寻找最佳替代方案。请帮忙。提前谢谢你:)

.in-middle{
width:100%;
margin-top: 25%;
}
<body>
<div class="in-middle">
<h1>This should be aligned in the center</h1>
<p>Paragraph which should also be centered</p>
</div>
</body>

最佳答案

您可以使用以下解决方案,使用 tranform属性:

.in-middle{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="in-middle">
<h1>This should be aligned in the center</h1>
<p>Paragraph which should also be centered</p>
</div>

不建议使用 margin-top 而不是 tranform 来垂直居中元素。

关于html - css响应中的垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40523043/

25 4 0
文章推荐: html - 我需要将
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com