I was doing a personal mini-project, and when I place a symbol that has text next to it, it looks like this:
<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>
How could I get the text to align with the tag <i>
?
I have been looking but only found how to align with images but not being an image it didn't work.
Thanks for your attention
You could do it in a clean way with
display: flex
, through thealign-items: center
. This causes all the content of the<p>
(both the text and the icon) to be positioned in the center of all the space they have vertically.