Estou criando um site e quero ter duas imagens lado a lado com um pedaço de texto no centro de ambas.
Html:
<div id="body">
<div class="image-row-container">
<img class="image-row image-row-1" src="assets/team-photo.JPG">
<p class="text-overlap" style="position: absolute; left: 25%; transform: translateX(-75%);">The Team</p>
<img class="image-row image-row-2" src="assets/test.JPG">
<p class="text-overlap" style="position: absolute; left: 75%; transform: translateX(-25%);">The Vehicle</p>
</div>
</div>
CSS:
.image-row {
display:inline-block;
width:50%;
height:500px;
}
.image-row-1 {
float:left;
}
.image-row-2 {
float:right;
}
Até agora, consegui colocar as duas imagens lado a lado e alinhar o texto horizontalmente, mas não consigo descobrir como simplesmente alinhar verticalmente o texto ao centro das imagens. Se você tiver alguma dica sobre meu problema principal ou recomendações de dicas sobre formatação, métodos diferentes ou código ruim, agradecemos muito. Eu sou um novato, então qualquer ajuda é uma boa ajuda!
Enrolei cada imagem e texto em um contêiner adicional e, em seguida, posicionei o texto de forma absoluta para ser centralizado no topo da imagem. Acho que é isso que você estava procurando.
.image-row {
display: flex;
}
.image-container {
width: 50%;
position: relative;
}
.image-container img {
width: 100%;
height: auto;
}
.image-container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-weight: bold;
margin: 0;
}<div class="image-row">
<div class="image-container">
<img src="https://placeimg.com/300/500/nature">
<p>The Team</p>
</div>
<div class="image-container">
<img src="https://placeimg.com/300/500/nature?t=1529100921702">
<p>The Team</p>
</div>
</div>Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras