Question

我有一个width: 180px;和height: 180px;的div 如何在容器内水平和垂直居中显示一个fontawesome图标？注意：我也可以在图标

下面添加文字

<div style="width:180px; height:180px; float:left;">
  <i class="fa fa-search fa-4x"></i>
</div>

应该是这样的：
enter image description here

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

根据我的评论，这是 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 4

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

DEMO

更新1： DEMO

Answer 5

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

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

Answer 6

我知道有点晚了你可能已经想到了这一点。

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

请参阅随附的笔。

http://codepen.io/ForTheJim/pen/YPxveR

＆＃13;

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

＆＃13;

Answer 7

简而言之，只需将 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>

如何在div元素中居中字体真棒图标

7 个答案: