将图标字体范围与文本范围对齐
[英]Align icon-font span with text span in line
问题描述
I want to align an icon-font <span> tag with an text <span> in row. 
我想将图标字体<span>标记与文本<span>对齐。 It seems if the two <span> are in line but the icon is somehow "floating" over the div. 似乎两个<span>对齐，但图标以某种方式“浮动”在div上。
.navigation { padding-left: 50px; padding-top: 50px; padding-bottom: 50px; } .navigation .counter { background: red; vertical-align: middle; font-size: 13px; } .navigation span { background: green; padding-bottom: 0px; } .navigation .material-icons { font-size: 21px; }
<head> <meta charset="utf-8" /> <script> document.write('<base href="' + document.location + '" />'); </script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="angular.js@1.3.x"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <div class="navigation"> <span><i class="material-icons">arrow_drop_down</i></span> <span><i class="material-icons">arrow_drop_up</i></span> <span class="counter">select floor</span> </div>
So how can I align the icon and the text so that the text is in the vertical center of the icon ? 那么，如何对齐图标和文本，使文本位于图标的垂直中心？
3 个解决方案
解决方案1
2 已采纳 2016-03-02 13:01:57
The line-height of the text needs to be the same as the font-size of the icon's. 文本的line-height必须与图标的font-size相同。 Using vertical-align:middle; 使用vertical-align:middle; in this way is not necessary. 这样就没有必要了。
.navigation { padding-left: 50px; padding-top: 50px; padding-bottom: 50px; } .navigation .counter { background: red; font-size: 13px; line-height:21px; vertical-align:top; } .navigation span { background: green; padding-bottom: 0px; display: inline-block; } .navigation .material-icons { font-size: 21px; vertical-align:top; }
<head> <meta charset="utf-8" /> <script> document.write('<base href="' + document.location + '" />'); </script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="angular.js@1.3.x"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <div class="navigation"> <span><i class="material-icons">arrow_drop_down</i></span> <span><i class="material-icons">arrow_drop_up</i></span> <span class="counter">select floor</span> </div>
解决方案2
0 2016-03-02 13:01:00
Please update the following classes with vertical-align and display Properties: 请使用vertical-align更新以下类并display属性”：
CSS 的CSS
.navigation {
padding-left: 50px;
padding-top: 50px;
padding-bottom: 50px;
display: inline-block;
}
navigation .material-icons {
font-size: 21px;
vertical-align: middle;
}
解决方案3
0 2016-03-02 13:05:58
Just adding verical-align: middle to .navigation .material-icons will solve the issue. 只需在.navigation .material-icons中添加verical-align：中即可解决该问题。
.navigation { padding-left: 50px; padding-top: 50px; padding-bottom: 50px; } .navigation .counter { background: red; vertical-align: middle; font-size: 13px; } .navigation span { background: green; padding-bottom: 0px; } .navigation .material-icons { font-size: 21px; vertical-align: middle; }
<head> <meta charset="utf-8" /> <script> document.write('<base href="' + document.location + '" />'); </script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js" data-require="angular.js@1.3.x"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <div class="navigation"> <span><i class="material-icons">arrow_drop_down</i></span> <span><i class="material-icons">arrow_drop_up</i></span> <span class="counter">select floor</span> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.