CSS 垂直和水平居中 FontAwesome 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17642953/
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
Centering FontAwesome icons vertically and horizontally
提问by Nix
I'm currently using FontAwesome, and am having a really hard time centering the icons both vertically and horizontally in their container. I have tried doing it via positioning and ran into issues bc the icon sizes were different. I basically have the horizontal, and am trying to get the vertical.
我目前正在使用 FontAwesome，并且很难将图标在其容器中垂直和水平居中。我尝试通过定位来做，但遇到了问题，因为图标大小不同。我基本上有水平，并试图获得垂直。
<div class='container'>
<div class='row'>
<div class='offset2 span6 loginContainer'>
<div class='row'>
<div class='login-icon'>
<i class='icon-user'></i>
</div>
<input type="text" placeholder="Email" />
</div>
<div class='row'>
<div class='login-icon'><i class=" icon-lock "></i></div>
<input type="password" class="" placeholder="Password" />
</div>
</div>
</div>
</div>
.login-icon{
font-size: 40px;
line-height: 40px;
background-color:black;
color:white;
width: 50px;
height: 50px;
}
.login-icon [class*='icon-']{
height: 50px;
width: 50px;
display: inline-block;
text-align: center;
vertical-align: baseline;
}
回答by koala_dev
This is all you need, no wrapper needed:
这就是你所需要的，不需要包装器：
.login-icon{
display:inline-block;
font-size: 40px;
line-height: 50px;
background-color:black;
color:white;
width: 50px;
height: 50px;
text-align: center;
vertical-align: bottom;
}
回答by Phuc Le
I have used transform to correct the offset. It works great with round icons like the life ring.
我已经使用变换来纠正偏移。它适用于圆形图标，如救生圈。
<span class="fa fa-life-ring"></span>
.fa {
transform: translateY(-4%);
}
回答by Nix
So I finally got it(http://jsfiddle.net/ncapito/eYtU5/):
所以我终于明白了（http://jsfiddle.net/ncapito/eYtU5/）：
.centerWrapper:before {
content:'';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.center {
display:inline-block;
vertical-align: middle;
}
<div class='row'>
<div class='login-icon'>
<div class='centerWrapper'>
<div class='center'> <i class='icon-user'></i></div>
</div>
</div>
<input type="text" placeholder="Email" />
</div>
回答by AdamSchuld
I just lowered the height to 28px on the .login-icon [class*='icon-'] Here's the fiddle: http://jsfiddle.net/mZHg7/
我只是将 .login-icon [class*='icon-'] 上的高度降低到 28px 这是小提琴：http: //jsfiddle.net/mZHg7/
.login-icon [class*='icon-']{
height: 28px;
width: 50px;
display: inline-block;
text-align: center;
vertical-align: baseline;
}
回答by Kardaw
I just managed how to center icons and and making them a container instead of putting them into one.
我只是设法使图标居中并使它们成为一个容器，而不是将它们合二为一。
.fas {
position: relative;
color: #EEE;
font-size: 16px;
}
.fas:before {
position: absolute;
left: calc(50% - .5em);
top: calc(50% - .5em);
}
.fas.fa-icon {
width: 60px;
height: 60px;
color: white;
background-color: black;
}
回答by Ariman
the simplest solution to both horizontally and vertically centers the icon:
使图标水平和垂直居中的最简单解决方案：
<div class="d-flex align-items-center justify-content-center">
<i class="fas fa-crosshairs fa-lg"></i>
</div>
回答by Jeremiah Fries
If you are using twitter Bootstrap add the class text-center to your code.
如果您使用 twitter Bootstrap，请将类 text-center 添加到您的代码中。
<div class='login-icon'><i class="icon-lock text-center"></i></div>
