gpt4 book ai didi

javascript - 两张图片之间的文字 - 文字在前面,图片紧挨着

转载 作者:行者123 更新时间:2023-12-01 23:26:54 25 4
gpt4 key购买 nike

我试图让两张图片之间的文字位于最前面,而不是将图片分开。

图像之间应该有一个负方形,在这个正方形内,文本应该水平和垂直居中

我试过position: relative, absolute。我试过将它分成三个 div 等。不知道该怎么做。谢谢!

body {
color: white;
background-color: black;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

img1 {
height: 50%;
width: 50%;
}

.aligncenter {
text-align: center;
}

hiddenText {
display: none;
}

inline {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>

<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<br>
<br>
<div>
<p class="aligncenter">
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=15hcGtSWQznjo_wdd_p8_E64bUQNf9qGZ"></image>
This Text
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=1S-VObwCJO3YJcqHSvTxNHYDMG0x0qZo2"></image>
</p>
</div>
</body>
</html>

最佳答案

您可以通过给父元素 position: relative 来做到这一点并将文本放入容器中,例如 <span>或类似的并给它这个 CSS:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

测试:

body {
color: white;
background-color: black;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

img1 {
height: 50%;
width: 50%;
}

.pos-relative {
position:relative;
}

.aligncenter {
text-align: center;
}

hiddenText {
display: none;
}

#centerText {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

inline {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>

<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<br>
<br>
<div>
<p class="aligncenter pos-relative">
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=15hcGtSWQznjo_wdd_p8_E64bUQNf9qGZ"></image>
<span id="centerText">This Text</span>
<image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=1S-VObwCJO3YJcqHSvTxNHYDMG0x0qZo2"></image>
</p>
</div>
</body>
</html>

关于javascript - 两张图片之间的文字 - 文字在前面,图片紧挨着,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67068795/

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