0
108
Vistas¿Por qué no puedo hacer que estas imágenes con títulos fluyan horizontalmente al centro?
Previamente planteé una pregunta aquí 1 , y se respondió adecuadamente para resolver mi primer problema, pero no mi segundo problema: el primero es la disposición adecuada del código y el segundo es la pregunta de la que estoy hablando. Eliminé el código CSS que se aplicó originalmente, que puede ver en la pregunta original, y apliqué el nuevo código CSS de la siguiente manera:
.img { margin: 10px; } .grid { display: flex; flex-wrap: wrap; /* max-width: 800px; */ } .grid a { display: flex; align-items: center; } max-width: 800px; y obtuve el siguiente resultado 
.
Agregando el max-width: 800px; mostró los mismos resultados en la imagen. Probé varias combinaciones de CSS sin resultados positivos. El fragmento de código de la siguiente manera:
<div className={styles.grid}> <div className={styles.imgc}> <a href="..\pages\satweather.js"> <img className={styles.img} src="weatherbutton.jpg" width="100" height="50" onclick="openModal();currentSlide(1)"> </img> <div>→ SatWeather</div> </a> </div> /* code continues in repetition for 4 more images before ending with */ </div>¿Alguien tiene alguna sugerencia sobre lo que podría intentar o una solución a este problema? Para obtener estas imágenes alineadas al centro y horizontalmente a la página. Se agradece la ayuda.
Aquí está el resultado deseado, pero sin espacio entre la foto y el enlace a la página. 
Tenga en cuenta: esto es JS, no HTML.
1 Respuestas
Responde la pregunta0
- Aquí está la versión
htmlde su código. - Use
display:flexto image container y luego, haga un elemento separado para el cuadro de imagen como aquí, que esimage-box, establezca su etiqueta deanchorendisplay:flexyalign-items:center.
* { box-sizing: border-box; margin: 0; padding: 0; } .container { background-color: #050505; } .image-container { position: relative; display: flex; flex-direction: row; gap: 15px; flex-wrap: wrap; } .image-class { height: 50px; width: 100%; object-fit: cover; } .image-box a { display: flex; flex-direction:column; } <div class="container"> <div class="image-container"> <div class="image-box"> <a href="javasctipt:void(0);"> <img src="https://source.unsplash.com/random" alt="image" class="image-class"> <h1>image titel</h1> </a> </div> <div class="image-box"> <a href="javasctipt:void(0);"> <img src="https://source.unsplash.com/random" alt="image" class="image-class"> <h1>image titel</h1> </a> </div> <div class="image-box"> <a href="javasctipt:void(0);"> <img src="https://source.unsplash.com/random" alt="image" class="image-class"> <h1>image titel</h1> </a> </div> <div class="image-box"> <a href="javasctipt:void(0);"> <img src="https://source.unsplash.com/random" alt="image" class="image-class"> <h1>image titel</h1> </a> </div> </div> </div>