文章/答案/技术大牛

发布

社区首页 >问答首页 >文本对齐中心与google图标

问文本对齐中心与google图标
EN

Stack Overflow用户

提问于 2018-01-03 00:31:58

回答 1查看 1.3K关注 0票数 0

我有带短信的谷歌图标。我需要中心对齐我的文字，使它看起来很好与图标。我尝试了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

Stack Overflow用户

发布于 2018-01-03 00:40:30

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

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

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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48069695

复制

相似问题

问文本对齐中心与google图标
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本对齐中心与google图标EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问文本对齐中心与google图标
EN