Question

我有带文字的谷歌图标。我需要居中对齐我的文字，以便它与图标看起来很好。我试过css vertical align并没有用。任何人都可以帮助我调整我的文本中心。

<html>
  <head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <p style="vertical-align: middle">yyyy<i class='material-icons'>clear</i>yyyy</p>
  </body>
</html>

Answer 1

将vertical-align属性声明为图标（因为它已经是display: inline-block），例如：

<i class="material-icons" style="vertical-align: middle">clear</i>

或者将文本包装在 inline 元素中，您可以设置样式以将垂直与图标对齐，例如：

<span style="vertical-align: top">yyyy</span><i class="material-icons">clear</i><span style="vertical-align: top">yyyy</span>

代码段示范：

<html>
  <head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <p>yyyy<i class="material-icons" style="vertical-align: middle">clear</i>yyyy</p>
    <p><span style="vertical-align: top">yyyy</span><i class="material-icons">clear</i><span style="vertical-align: top">yyyy</span></p>
  </body>
</html>

文本对齐中心与谷歌图标

1 个答案: