CSS 如何在 div 元素内居中放置一个 fontawesome 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25707715/
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
How to center a fontawesome icon inside a div element
提问by Aritra Hazra
I have a div with width: 180px;and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
我有一个 divwidth: 180px;和height: 180px;。
如何在容器内水平和垂直居中一个 fontawesome 图标？
注意：我也可以在图标下方添加文字
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
应该是这样的：
采纳答案by Kasper Franz
You can do it like this
你可以这样做
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/(using icon instead of fa in the example, but shouldn't affect the result.)
工作示例http://jsfiddle.net/kasperFranz/h91p8w4e/3/（在示例中使用 icon 而不是 fa，但不应该影响结果。）
回答by MindlessRanger
Try this:
尝试这个：
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
在移动。
回答by Dwza
Asuming to my comment, here is a JSFIDDLE
假设我的评论，这是一个JSFIDDLE
Without setting relativeor absolute
无需设置relative或absolute
html
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
回答by Hamix
CSS
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
Update 1: DEMO
更新 1： 演示
回答by Hamz Sider
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
我在这里可能为时已晚，但这是一个常见问题，所以这是一个简单的工作想法，有趣的一面是它适应容器大小：
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
回答by ForTheJim
I know it's a bit late and you probably already figured this out.
我知道现在有点晚了，你可能已经想通了。
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
我能够通过将图标和文本包装在 div 中然后添加填充来实现您想要的。
See the attached pen.
请参阅随附的笔。
http://codepen.io/ForTheJim/pen/YPxveR
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>@ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>