Actualmente estoy tratando de codificar un sitio web por primera vez, y me he encontrado con el problema de que cuando trato de subtitular una imagen en una galería y agregar una diapositiva de información emergente que no está centrada debajo de la imagen, pero en cambio está a la derecha de la imagen. La imagen siempre debe tener un título, y cuando se desplaza sobre la imagen, debe aparecer un cuadro de texto para que se pueda leer una descripción. No estoy muy seguro de cómo solucionar el problema porque pensé que ya había centrado el texto. Si alguien me puede ayudar le estare muy agradecido.
<div class="row1"> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <figcaption> John Smith</figcaption> <div class="text"> <p>This is a cat</p> <span class="arrow-link">ARROW IMG HERE</span> </div> </div> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <div class="text"> <p>This is a cat</p> </div> </div> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <div class="text"> <p>This is a cat</p> </div> </div> </div>Posición: Absoluta; y estructura flexbox, hará lo que quieras.
https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css_positioning.asp
la solución es especificar la posición desde la izquierda para .text.
(Consejo: creo que es una buena idea comenzar con Bootstrap . Con Bootstrap puede construir el marco básico de un sitio web de manera relativamente fácil, de modo que también funcione en el teléfono inteligente. Luego, puede personalizar todo usted mismo como desee. para construir el marco básico de un sitio web usted mismo y hacerlo receptivo para diferentes dispositivos es muy difícil como principiante, por lo que corre de un gran problema al siguiente. último cuando comienza con consultas de medios, apenas puede seguirlo todos.)
figcaption { color: white; font-style: oblique; position: relative; text-align: center; } * { box-sizing: border-box; } .column1 { position: relative; width: 200px; height: 300px; overflow: hidden; } p { color: black; /* changed to black, so you can see the text */ font: 25px Sulphur Point, sans-serif; } .text { position: absolute; bottom: 0; /* right: 0;*/ left: 0; /* here */ width: 200px; height: 0; text-align: center; transition: height 0.7s ease-out; } .column1:hover>.text { height: 150px; } .column1 { float: left; width: 33.33%; padding: 5px; margin-bottom: 50px; } /* Clearfix (clear floats) */ .row1::after { content: ""; clear: both; display: table; margin-bottom: 50px; } <div class="row1"> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <figcaption> John Smith</figcaption> <div class="text"> <p>This is a cat</p> <span class="arrow-link">ARROW IMG HERE</span> </div> </div> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <div class="text"> <p>This is a cat</p> </div> </div> <div class="column1"> <img src="img/hi_bild.jpg" height="200px" width="200px"> <div class="text"> <p>This is a cat</p> </div> </div> </div>