Quiero que el ícono esté cerca del texto dentro del cuadro redondo, pero aparece hacia abajo, aquí está mi código.
HTML:
<div className="RoundBox"> <div className="DashImages"><img src={PDF} alt="PDF"></img> <div className="IconText">PDF File</div> </div>
CSS:
img { width: 3vw; height: 3vw; margin-left: 1vw; } .IconText { } .RoundBox { border-radius: 0.5vw; border: 1.5px solid grey; box-shadow: #e3eaf6; width: 20vw; height: 3vw; float: left; }
Esto debería funcionar.
Los elementos div son elementos de bloque, por lo que siempre intentarán llenar todo el espacio horizontal si las propiedades de visualización o ancho no se cambian o el elemento principal anula ese comportamiento (por ejemplo, usando FlexBox)
HTML
<div className="RoundBox"> <div className="DashImages"><img src={PDF} alt="PDF" /></div> <div className="IconText">PDF File</div> </div>
CSS
img { width: 3vw; height: 3vw; margin-left: 1vw; } .IconText { padding-left: 10px } .RoundBox { border-radius: 0.5vw; border: 1.5px solid grey; box-shadow: #e3eaf6; width: 20vw; height: 3vw; float: left; display: flex; align-items: center; }
Su html no es válido con la etiqueta de imagen y le falta un div. Querrías arreglar eso primero.
<div className="DashImages"><img src={PDF} alt="PDF" /></div>
Entonces tienes un par de opciones. Aquí hay dos ejemplos:
float: left
al img css. Podría recomendar usar una clase en lugar de un selector que apunte a todas las etiquetas img
. Ejemplo img { width: 3vw; height: 3vw; margin-left: 1vw; float: left; }
flexbox
agregando display: flex;
a su clase .RoundBox
. Tenga en cuenta que hay diferentes atributos de alineación que puede usar para colocar elementos usando flex. .RoundBox { border-radius: 0.5vw; border: 1.5px solid grey; box-shadow: #e3eaf6; width: 20vw; height: 3vw; float: left; display: flex; }