我正在做一个个人迷你项目,当我在旁边放置一个带有文本的符号时,它看起来像这样:
<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>
我怎样才能让文本与标签对齐<i>
?
我一直在寻找,但只发现如何与图像对齐,但不是图像它不起作用。
感谢您的关注
您可以
display: flex
通过align-items: center
. 这会导致<p>
(文本和图标)的所有内容都位于它们垂直拥有的所有空间的中心。