necesito hacer que el ícono y el texto estén en la misma línea y cerca uno del otro, intenté usar display: inline-block; pero no funcionó, aquí está mi código.
HTML:
<div className="Comment_Icon"> <img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img> <div className="Comments">5 Class Comments</div> </div>CSS:
.Student_Icon { height: 1vw; width: 1vw; display: inline-block; } .IconText { padding-top: 0.8vw; font-size: 1.5vw; } .Comments { font-size: 2.5vw; display: inline-block; }Use flex en este caso como se muestra a continuación
.IconText { padding-top: 0.8vw; font-size: 1.5vw; } .Comments { font-size: 2.5vw; display: inline-block; } .Comment_Icon { display: flex; flex-direction: row; align-items: center; } .Student_Icon { margin-right: 3px; } <div class="Comment_Icon"> <img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img> <div class="Comments">5 Class Comments</div> </div>Puede lograr esto con el estilo flexbox. Tenga en cuenta que estoy cambiando un poco su estructura React y también agregando una imagen falsa. ¿Y quisiste usar 1vw? eso significa el 1% del ancho de la ventana gráfica y es bastante pequeño, especialmente en pantallas pequeñas.
Usar y hacer referencia a las unidades REM es más confiable (REM se establece en el elemento raíz y generalmente tiene 16 píxeles, pero se puede cambiar. Pero la ventaja de usar rems es que tiene un tamaño común al que pueden acceder todos los elementos.
.Comment_Icon { display: flex; align-items: center; } .Student_Icon { height: 1.5rem; width: 1.5rem; } .Comments { font-size: 1rem; margin-left: 8px; } <div class="Comment_Icon"> <img src="https://hipsiti.com/uploads/default-profile.png" alt="StudentIcon" class="Student_Icon"/> <span class="Comments">5 Class Comments</span> </div> .Student_Icon { float: left; padding-right: 10px; } .IconText { padding-top: 0.8vw; font-size: 1.5vw; } .Comments { font-size: 2.5vw; display: inline-block; } <div className="Comment_Icon"> <img src=https://via.placeholder.com/20 class="Student_Icon"></img> <div className="Comments">5 Class Comments</div> </div> Hice uso de float: left; Así que el ícono/imagen viene a la izquierda y el texto al lado.