如何将 fontawesome 图标置于 div 元素中

Answer 1

试试这个：

.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}

.container{
width:100px;
height:100px;
}

在移动设备上。

Answer 2

你可以这样做

#search{
    background: gray;
    width:180px; 
    height:180px; 
    float:left; 
    line-height: 180px;     
    text-align: center;
    vertical-align: bottom;
}

#search > p {
    margin-top: -155px;
}

工作示例http://jsfiddle.net/kasperFranz/h91p8w4e/3/（在示例中使用 icon 代替 fa，但不应该影响结果。）

Answer 3

我可能来得太晚了，但这是一个常见问题，所以这是一个简单的工作想法，它有趣的一面是它适应容器大小：

span{
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  text-align: center;
  width: 15px;
  height: 15px;
  display: block;
}

Answer 4

根据我的评论，这是一个JSFIDDLE

未设置

relative

或

absolute

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

.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;
}

Answer 5

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

<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>

演示

更新1： 演示

Answer 6

只需将

display: grid; place-items: center;

添加到您的 div 即可开始使用。

像这样：

<div style="width:180px; height:180px; display: grid; place-items: center;">
  <i class="las la-user-circle"></i>
</div>

Answer 7

这里的大多数答案都没有达到OP的要求。如今解决这个问题最简单、最好的方法就是使用 Flexbox。

还有其他方法。在下面的代码片段中，有 4 种可能的解决方案：

:root {
--parentWidth: 180px;
--parentHeight: 180px;  
}

.search {
  background: gray;
  width: 180px;
  height: 180px;
}

.fa-search {
  padding: 20px;
  border: 3px solid red;
}

/* Solution 1 */
.grid {
  display: grid;
  place-items: center;  
}

/* Solution 2 */
.flex {
  display: flex;
  align-items: center; 
  justify-content: center;
}

/* Solution 3 */
.calc-outer {
  width: var(--parentWidth, 180px);
  height: var(--parentHeight), 180px)
}
.calc-inner {
  position: relative;
  left: calc(var(--parentWidth) * .2);
  top: calc(var(--parentHeight) * .2);
}

/* Solution 4 */
.table-inner {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<h1>Solution 1: Using Flexbox (recommended)</h1>
<div class="search flex">
  <i class="fa fa-search fa-4x"></i>
</div>

<hr>

<h1>Solution 2: Using Gridbox</h1>
<div class="search grid">
  <i class="fa fa-search fa-4x"></i>
</div>

<hr>

<h1>Solution 3: Using calc (not recommended)</h1>

<div class="search calc-outer">
    <i class="fa fa-search fa-4x calc-inner"></i>
</div>

<hr>

<h1>Solution 4: Using transform (not recommended)</h1>

<div class="search">
    <i class="fa fa-search fa-4x table-inner"></i>
</div>

如您所见，最后两个解决方案没有产生预期的结果。

Codepen：https://codepen.io/r-w-c/pen/YzbKbQd

Answer 8

我知道有点晚了，你可能已经明白了。

我能够通过将图标和文本包装在 div 中然后添加填充来实现您正在寻找的内容。

请参阅随附的笔。

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>