gpt4 book ai didi

html - 我怎样才能解决那个相对/绝对问题?

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

我试图将此文本放在图像上,但行不通!我已经验证了我的代码中的所有内容,从链接 css 到我的代码中的错误,但没有找到任何东西。

.pai {
position:relative;
}

.filho {
position:absolute;
text-align:center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Estudos.css">
</head>
<body>
<div class="pai">
<img src="bgestudio.jpg" alt="">
<div class="filho">
<h1>Qualquer</h1>
</div>
</div>
</body>
</html>

强文本 [1]:/image/OsBdx.jpg

最佳答案

你需要让容器div与图片宽度相同,然后文本div填充容器:

.pai {
position:relative;
display:inline-block; /* make this div as wide as the image - can be removed if the image is 100% width */
}

.filho {
position:absolute;
text-align:center;
left: 0;
right:0; /* left and right mean width will be 100%; */
top:50%;
transform: translateY(-50%); /* top 50 and translate mean it is vertically centered */

color:white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Estudos.css">
</head>
<body>
<div class="pai">
<img src="https://www.fillmurray.com/200/300" alt="">
<div class="filho">
<h1>Qualquer</h1>
</div>
</div>
</body>
</html>

关于html - 我怎样才能解决那个相对/绝对问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53175278/

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