0
128
VistasCentrado del carrusel de diseño de hormigas en la pantalla
Cambié el tamaño de un carrusel de diseño de hormigas y me gustaría mover la imagen para que aparezca en el centro de mi pantalla.
Así es como aparece la imagen actualmente 
Esto es lo que he probado:
const contentStyle = { height: '160px', width: '25%', color: '#fff', lineHeight: '60%', textAlign: 'center', background: '#364d79', justifyContent: 'center', alignItems: 'center', }; const imageStyle = { flex: 1, width: '100%', height: '100%', resizeMode: 'center', } return( <> <Carousel autoplay> { [onlineUsers].length === 0 ? <p>There are currently no active users</p> : onlineUsers.map(user => { return ( <div className="img-container"> <h3 style={contentStyle}><img style={imageStyle} src={user.profile_pic} /></h3> </div> ) }) } </Carousel>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede usar flex en el contenedor de imágenes. Parece que en tiempo de ejecución, en el contenedor, se asigna display:inline-block . Así que tenemos que usar display: flex !important para que funcione.
También es importante poner un width y height:auto a la imagen.
CSS
.container { display: flex !important; justify-content: center; background-color: hotpink; align-content: center; } .container > img { width: 80px; height: auto; } .carousal { background-color: brown; padding-bottom: 50px; }JS
<Carousel className="carousal"> <div className="container"> <img src={user} alt="xx" /> </div> <div className="container"> <img src={programmer} alt="xx" /> </div> </Carousel>He hecho una caja de arena con dos imágenes, de diferentes tamaños, alineadas al centro.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta