CSS 垂直对齐材质图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43360526/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align material icon vertically
提问by kentor
I am trying to vertically align my "dropdown arrow" in a naviation menu.
我试图在导航菜单中垂直对齐我的“下拉箭头”。
I have tried varioust hings like vertical-align: middle, display: inline-block and stuff like that but that didn't help at all. http://img02.imgland.net/jfCmDoW.png
我尝试过诸如vertical-align: middle、display: inline-block之类的各种铰链，但这根本没有帮助。 http://img02.imgland.net/jfCmDoW.png
The HTML looks like this:
HTML 如下所示：
<li>
<a href="#!" data-activates="dropdown1">English
<i class="material-icons">arrow_drop_down</i>
</a>
</li>
I have created a JSFiddle which demonstrates the problem: https://jsfiddle.net/dbwaoLrh/
我创建了一个 JSFiddle 来演示这个问题：https://jsfiddle.net/dbwaoLrh/
Explanations of what I am doing wrong there are highly appreciated as I face this issue every time I am using "custom" font sizes using the materialize-framework.
每次我使用 materialize-framework 使用“自定义”字体大小时，我都会遇到这个问题，因此非常感谢我对我做错了什么的解释。
回答by frnt
You might have tried various stylingto arrange your icons, but you need to target your icons i.e. i tagas below and style,
您可能已经尝试了多种方式styling来安排您的icons，但您需要针对icons i.e. i tag以下内容和风格，
.footer-links > li > a > i{
vertical-align:middle;
}
Check this two jsFiddle, I have added backgroundto one just for understanding purpose.
检查这个two jsFiddle，我添加background了一个只是为了理解目的。
https://jsfiddle.net/dbwaoLrh/2/
https://jsfiddle.net/dbwaoLrh/2/
回答by Rohit Sharma
Use line-heightfor simple vertical centering:
使用line-height简单的垂直居中：
This property controls the heightof a line in a run of text and adds an equal amount of space above and below the line-box of inline elements. If the heightof the container is known, then setting a line-heightof the same value will vertically center the child elements.
此属性控制height一系列文本中的一行，并在行内元素的行框上方和下方添加等量的空间。如果height容器的 已知，则将 a 设置line-height为相同的值将使子元素垂直居中。
.container {
width: 200px;
height: 200px;
line-height: 200px;
}
Use positionand transformfor flexible vertical centering:
使用position和transform灵活的垂直居中：
.container {
position: relative;
min-height: 100vh;
}
.vertical-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Or we can use margininstead of positioning!
或者我们可以使用margin代替定位！
Use flexboxfor vertical centering:
使用flexbox垂直居中：
The method above works great for centering elements using a traditional box model and positioning techniques. It will work in IE9+ but if you only need to support modern browsers or IE10+, you can achieve the same result with much less code by using flexbox.
上面的方法非常适合使用传统的盒子模型和定位技术来居中元素。它可以在 IE9+ 中运行，但如果您只需要支持现代浏览器或 IE10+，您可以使用flexbox.
.container {
display: flex;
justify-content: center;
align-items: center;
}
回答by Rakesh Soni
Try this
尝试这个
.material-icons {
vertical-align: 1px; /*Change this to adjust the icon*/
}
Second option is you can use is:
第二个选项是您可以使用的是：
.material-icons {
position: relative;
top: 1px; /*Change this to adjust the icon*/
}
What you are doing wrong
你做错了什么
There is css rule for icon: font-size:24pxwhich is greater than the parent anchor element and line height is 1 so resulting line height is 24px; that's why it was not working. If you want you can use your own code just change the line-height equal to parent anchor elementand use vertical-align:middlefor icon
图标有 css 规则：font-size:24px大于父锚元素且行高为 1，因此结果行高为 24px；这就是它不起作用的原因。如果您愿意，您可以使用自己的代码，只需更改与父锚元素相等的行高并使用vertical-align:middle作为图标
See Js Fiddle
回答by Rohit Sharma
You should add vertical-align: middle;rule for .material-icons:-
您应该vertical-align: middle;为.material-icons以下内容添加规则：-
.material-icons {
vertical-align: middle;
}
回答by DavidLyonsGarcia
I was using font Awesome and to get the exact same Vertical Align with Material Font, I setup this CSS and it aligns perfectly
我正在使用 font Awesome 并获得与 Material Font 完全相同的垂直对齐，我设置了这个 CSS 并且它完美对齐
.material-icons {
vertical-align: middle;
padding-bottom: 3px }
Tested in Firefox, Chrome, InternetExplorer and Edge.
在 Firefox、Chrome、InternetExplorer 和 Edge 中测试。
