gpt4 book ai didi

html - 如何使用 div 将图像垂直居中?

转载 作者:太空宇宙 更新时间:2023-11-04 03:08:30 25 4
gpt4 key购买 nike

我目前正在使用以下方法将图像水平居中:

.centeredImage
{
text-align:center;
display:block;
}

<!DOCTYPE html>
<html>

<head>
<title>My Site</title>
<link href="style.css" rel="stylesheet">

</head>

<body>

<p class="centeredImage"><img id ="img" src="smallslide1.png"></p>

</body>
</html>

这很好用,但我也想将它垂直居中。不知道该怎么做。我厌倦了将它包装在一个单独的 div 中

.centeredVert{
vertical-align: middle }

}

但这并没有做任何事情。有人可以给我一些关于如何做到这一点的指示吗?

最佳答案

您可以在图像本身上尝试绝对定位技巧:

.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<p class="centeredImage">
<img src="http://placehold.it/150x100">
</p>

关于html - 如何使用 div 将图像垂直居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29972917/

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