CSS：如何将文本集中在 div 容器内的多个图像上？ [复制]
Posted
技术标签:
【中文标题】CSS：如何将文本集中在 div 容器内的多个图像上？ [复制]【英文标题】：CSS: How do I centre text over multuple images inside a div container? [duplicate] 【发布时间】：2021-06-06 06:28:51 【问题描述】：我希望文本正好位于每张图片的中心，但它只是停留在它们上方。我为每个图像和文本项目使用一个 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>【问题讨论】：
【参考方案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>【讨论】：
用过这个，效果很好！并且类名相同的代码更简洁。【参考方案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>【讨论】：
【参考方案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
【讨论】：
【参考方案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>【讨论】：
以上是关于CSS：如何将文本集中在 div 容器内的多个图像上？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章