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

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

转载作者：行者123 更新时间：2023-12-02 16:14:38

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

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

我试过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>