CSS：如何将文本集中在 div 容器内的多个图像上？ [复制]

Question

我希望文本正好位于每张图片的中心，但它只是停留在它们上方。我为每个图像和文本项目使用一个 div，并使用一个通用 div 将所有这些项目放在一起。我确信有更有效的方法来组织它，但是我对 CSS 和 HTML 很陌生。

What I'm trying to achieve.

我正在使用的代码：

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}

.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}


/* Caption text */

.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  position: relative;
  top: 45%;
  width: 100%;
  text-align: center;
}

.text2 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  position: relative;
  top: 45%;
  width: 100%;
  text-align: center;
}

.text3 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  position: relative;
  top: 45%;
  width: 100%;
  text-align: center;
}

<div class="projects">
  <div class="project">
    <div class="text">heading1</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
  <div class="project2">
    <div class="text2">heading2</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
  <div class="project3">
    <div class="text3">heading3</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
</div>

Answer 1

您可以对标题使用绝对定位（而不是相对）。此外，由于您的所有容器和标题都使用相同的样式，因此您应该为它们使用相同的类名，而不是重新定义样式三次：

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}

.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

/* Caption text */

.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  padding: 8px 12px;
  width: 100%;
  text-align: center;
  /* the following will vertically centre your heading */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div class="projects">
  <div class="project">
    <div class="text">heading1</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
  <div class="project">
    <div class="text">heading2</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
  <div class="project">
    <div class="text">heading3</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
  </div>
</div>

Answer 2

在.text 中，您可以使用以下方法之一：

.text {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

或

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

这是第二个解决方案的示例

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}
.project {
    position: relative;
    margin:0 auto;
    width: 100%;
    max-height: 600px;
    min-height: 90px;
}
.text {
  font-family:'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: #FBB2B4;
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="projects">
    <div class="project">
    <div class="text">heading1</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
    </div>
    <div class="project">
    <div class="text">heading2</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
    </div>
    <div class="project">
    <div class="text">heading3</div>
    <img src="https://via.placeholder.com/150/" style="width:100%">
    </div>
</div>

Answer 3

您可以为此使用positioning。例如

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}


.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

/* Caption text */
.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: balck;
  text-decoration: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text2 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text3 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="projects">
  <div class="project">

    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading1</div>
  </div>
  <div class="project2">
    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading2</div>
  </div>
  <div class="project3">
    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading3</div>
  </div>
</div>

Fiddle code

Answer 4

只需将其添加到您的 CSS 中

    .project,.project2,.project3{
      display:flex;
      justify-content:center;
      align-items:center
      margin:10px 0; 
    }

.projects {
  width: 54%;
  position: relative;
  margin: auto;
}


.project {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}

.project3 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-height: 600px;
  min-height: 90px;
}
.project,.project2,.project3{
display:flex;
justify-content:center;
align-items:center;
margin:10px 0;
}
/* Caption text */
.text {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: balck;
  text-decoration: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text2 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.text3 {
  font-family: 'Verdana';
  font-weight: bold;
  font-size: 36px;
  color: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="projects">
  <div class="project">

    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading1</div>
  </div>
  <div class="project2">
    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading2</div>
  </div>
  <div class="project3">
    <img src="https://via.placeholder.com/150/" style="width:100%">
    <div class="text">heading3</div>
  </div>
</div>