文本与谷歌图标对齐中心答案

【问题标题】：text align center together with google icons文本与谷歌图标对齐中心
【发布时间】：2018-01-03 08:40:30
【问题描述】：

我有带有文字的谷歌图标。我需要居中对齐我的文本，以便它与图标看起来不错。我尝试了 css 垂直对齐但没有用。谁能帮我对齐我的文本。

<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>

【问题讨论】：

标签： css icons material-design

【解决方案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>

【讨论】：