0
136
VisualizaçõesReact.js - Componentes con estilo - imagen central en padre div directo con otros objetos
Entiendo que la pregunta parece bastante fácil, pero no he encontrado nada que me ayude.
Tengo una imagen dentro de un div y quiero que esa imagen esté centrada en ese div incluso si agrego, por ejemplo, un texto.
Aquí hay algunos códigos e imágenes para comprender mejor ese problema:
Si solo tengo mi imagen en mi div (con borde sólido), todo está bien:
<div> <img height = '75px' width = '75px' src={USDCoin}/> </div> 
Pero al agregar un texto, no puedo entender cómo mantener la imagen en el centro del div (bien alineado con las líneas grises) y el texto debajo de eso:
<div> <img height = '75px' width = '75px' src={USDCoin}/> test </div> 
Aquí hay un ejemplo completo:
<div style = {{display: flex; flex-direction: row; height: 90%; width: 100%; justify-content: center; align-items: center;}}> <Line/> <div> <img height = '75px' width = '75px' src={USDCoin}/> </div> <Line/> <Line/> <div> <img height = '75px' width = '75px' src={USDCoin}/> test </div> <Line/> </div>¡Gracias de antemano por su valiosa ayuda!
2 Respostas
Responde à pergunta0
Puede usar flexbox para hacer esto muy fácilmente. He creado un ejemplo aquí para usted (no incluye componentes con estilo, pero su problema no son los componentes con estilo de todos modos) https://codesandbox.io/s/solitary-night-7859bz
0
debe usar flex-direction: columna;
import { React } from "react"; export default function Demo() { return ( <> <div style={{ display: "flex", flexDirection: "column", height: "90%", width: "100px", border: "2px solid", justifyContent: "center", margin: "0 auto", alignItems: "center" }} > <div> <img height="75px" width="75px" src={ "https://images.unsplash.com/photo-1638913662252-70efce1e60a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" } /> </div> <div>test</div> </div> </> ); }