5

Estaba haciendo un mini-proyecto personal, y al colocar un símbolo que tenga texto al lado sale de la siguiente forma:

 <html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
 <div class="grid-item cuatro"> 
  <h1><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">info</i> Hola</h1>
  <p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i> Hola1<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;"> play_arrow</i> Hola2 <i class="material-icons" style="font-size:36px; color: DarkSlateBlue">play_arrow</i> Hola3 </p>
  <p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola4<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i> Hola 5 </p>
  <p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola6<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola 7</p>
  </div>
  </body>
  </html>

¿Cómo se podría conseguir alinear el texto con la etiqueta <i>?

He estado buscando, pero solo encontraba cómo alinear con imágenes, pero al no ser una imagen, no funcionaba.

Gracias por su atención

1 respuesta 1

5

Podrías hacerlo de una manera limpia con display: flex, a través de la propiedad align-items: center. Esto provoca que todo el contenido del <p> (tanto el texto como el icono) se posicionen en el centro de todo el espacio del que dispongan verticalmente.

.cuatro p, .cuatro h1 {
  display: flex;
  align-items: center;
}
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
 <div class="grid-item cuatro"> 
  <h1><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">info</i> Hola</h1>
  <p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i> Hola1<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;"> play_arrow</i> Hola2 <i class="material-icons" style="font-size:36px; color: DarkSlateBlue">play_arrow</i> Hola3 </p>
  <p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola4<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i> Hola 5 </p>
  <p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola6<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola 7</p>
  </div>
  </body>
  </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.