两个图像之间的文本 - 文本位于最前面，图像彼此相邻答案

【问题标题】：Text between two images - The text comes to the front and the images are next to each other两个图像之间的文本 - 文本位于最前面，图像彼此相邻
【发布时间】：2021-07-08 03:34:22
【问题描述】：

我试图让两个图像之间的文本出现在前面，而不是将图像分开。

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

我试过位置：相对的，绝对的。我试过把它分成三个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>

【问题讨论】：

标签： javascript java html css

【解决方案1】：

您可以通过给父元素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>

【讨论】：

这正是我想要的！谢谢

【解决方案2】：

您可以使用 flexbox 使用 align-items:center 使文本居中

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;
}

.d-flex {
  display:flex;
  align-items: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="d-flex">
      <image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=15hcGtSWQznjo_wdd_p8_E64bUQNf9qGZ"></image>
      <span>This Text</span>
      <image class="img1" width="250" height="300" src="https://drive.google.com/uc?id=1S-VObwCJO3YJcqHSvTxNHYDMG0x0qZo2"></image>
    </p>
  </div>
</body>
</html>

【讨论】：

这真的很好用！有没有办法将图像完全融合在一起？