文本对齐中心与谷歌图标
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本对齐中心与谷歌图标相关的知识，希望对你有一定的参考价值。
我有带文字的谷歌图标。我需要居中对齐我的文字，以便它与图标看起来很好。我试过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>
答案
将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>以上是关于文本对齐中心与谷歌图标的主要内容，如果未能解决你的问题，请参考以下文章