blocks|key|356224|text|你可以这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356225|#search{
++++background:+gray;
++++width:180px;+
++++height:180px;+
++++float:left;+
++++line-height:+180px;+++++
++++text-align:+center;
++++vertical-align:+bottom;
}

#search+>+p+{
++++margin-top:+-155px;
}|code-block|syntax|javascript|356226|工作示例http://jsfiddle.net/kasperFranz/h91p8w4e/3/+(在示例中使用图标而不是fa，但不应该影响结果)。|offset|length|356227|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kasperFranz/h91p8w4e/3/^0|0|0|4|17|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>You can do it like this</p>

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

#search &gt; p {
    margin-top: -155px;
}
</code></pre>

<p>Working example <a href="http://jsfiddle.net/kasperFranz/h91p8w4e/3/" rel="nofollow">http://jsfiddle.net/kasperFranz/h91p8w4e/3/</a> (using icon instead of fa in the example, but shouldn't affect the result.)</p>


blocks|key|1596125|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1596126|.centered{
position:relative;
top:50%25;
left:50%25;
transform:translate(-50%25,-50%25)
}

.container{
width:100px;
height:100px;
}|code-block|syntax|javascript|1596127|在手机上。|1596128|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try this:</p>

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

.container{
width:100px;
height:100px;
}
</code></pre>

<p>On mobile.</p>


blocks|key|356265|text|就我的评论而言，这是一个JSFIDDLE|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|356266|不设置relative或absolute|style|CODE|356267|html|356268|<div+class="myDiv">
++++<div+class="content_wrapper">
++++++++
++++++++<i+class="icon-search+icon-4x"></i><br+/>
++++++++<span+class="myText">Search</span>
++++</div>
</div>|code-block|syntax|javascript|356269|css|356270|.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;
}|356271|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/t2aocd80/^0|C|8|0|0|3|8|C|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@$A|15|B|16|F|G]|$A|17|B|18|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|C|$]]|$1|Q|3|R|5|L|7|1C|8|@]|9|@]|C|$M|N]]|$1|S|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>Asuming to my comment, here is a <strong><a href="http://jsfiddle.net/t2aocd80/" rel="nofollow noreferrer">JSFIDDLE</a></strong></p>

<p>Without setting <code>relative</code> or <code>absolute</code></p>

<p>html</p>

<pre><code>&lt;div class="myDiv"&gt;
    &lt;div class="content_wrapper"&gt;
        &lt;!--i class="fa fa-search fa-4x"&gt;test&lt;/i--&gt;
        &lt;i class="icon-search icon-4x"&gt;&lt;/i&gt;&lt;br /&gt;
        &lt;span class="myText"&gt;Search&lt;/span&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>css</p>

<pre><code>.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;
}
</code></pre>


blocks|key|635587|text|我在这里可能太晚了，但这是一个常见的问题，所以这里有一个简单的工作思路，有趣的方面是它适合容器大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|635588|span{
++margin:+auto;
++top:+0;
++bottom:+0;
++left:+0;
++right:+0;
++position:+absolute;
++text-align:+center;
++width:+15px;
++height:+15px;
++display:+block;
}|code-block|syntax|javascript|635589|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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:</p>

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


blocks|key|356296|text|CSS|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|356297|/*+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%25;
++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;
}|code-block|syntax|javascript|356298|356299|<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>|356300|演示|356301|更新1：演示|blockquote|356302|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/hamix/y7c3ykbm/|1|http://jsfiddle.net/hamix/0mt6uhm4/1/^0|0|3|0|0|0|0|0|2|0|0|4|2|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|16|8|@]|D|@]|E|$]]|$1|L|3|M|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|N|3|O|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|P|3|Q|5|R|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|S|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]]]

<p><strong>CSS</strong></p>

<pre><code>/* 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;
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="block" style="height: 300px;"&gt;

    &lt;div class="centered"&gt;
        &lt;h1&gt;Some text&lt;/h1&gt;
        &lt;p&gt;p1&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;

&lt;div class="block" style="height: 200px;"&gt;

    &lt;div class="centered"&gt;
        &lt;h1&gt;Some text&lt;/h1&gt;
        &lt;p&gt;p2&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;

&lt;div class="block" style="height: 600px;"&gt;

    &lt;div class="centered"&gt;
        &lt;h1&gt;Some text&lt;/h1&gt;
        &lt;p&gt;p3&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/hamix/y7c3ykbm/" rel="nofollow"><strong>DEMO</strong></a></p>

<blockquote>
  <p>Update 1:
  <a href="http://jsfiddle.net/hamix/0mt6uhm4/1/" rel="nofollow"><strong>DEMO</strong></a></p>
</blockquote>


blocks|key|637100|text|我知道现在有点晚了，你可能已经想明白了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|637101|通过在div中包装图标和文本，然后在其中添加填充，我就能够实现您想要的目标。|637102|见附笔。|637103|http://codepen.io/ForTheJim/pen/YPxveR|offset|length|637104|​|637105|<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>|code-block|syntax|javascript|637106|637107|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|12|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$H|12|I|13|1|14]]|A|$]]|$1|J|3|K|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|16|8|@]|9|@]|A|$O|P]]|$1|Q|3|K|5|6|7|17|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|G]]]]

<p>I know it's a bit late and you probably already figured this out. </p>

<p>I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that. </p>

<p>See the attached pen.</p>

<p><a href="http://codepen.io/ForTheJim/pen/YPxveR" rel="nofollow">http://codepen.io/ForTheJim/pen/YPxveR</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'&gt;See the Pen &lt;a href='http://codepen.io/ForTheJim/pen/YPxveR/'&gt;Centering Icon Question&lt;/a&gt; by Jim (&lt;a href='http://codepen.io/ForTheJim'&gt;@ForTheJim&lt;/a&gt;) on &lt;a href='http://codepen.io'&gt;CodePen&lt;/a&gt;.&lt;/p&gt;
&lt;script async src="//assets.codepen.io/assets/embed/ei.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1596222|text|简单来说，只需将display:+grid;+place-items:+center;添加到您的div中，您就可以开始操作了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1596223|就像这样：|1596224|<div+style="width:180px;+height:180px;+display:+grid;+place-items:+center;">
++<i+class="las+la-user-circle"></i>
</div>|code-block|syntax|javascript|1596225|entityMap^0|8|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>Short way just add <code>display: grid; place-items: center;</code> to your div and your ready to go.</p>
<p>like this:</p>
<pre><code>&lt;div style=&quot;width:180px; height:180px; display: grid; place-items: center;&quot;&gt;
  &lt;i class=&quot;las la-user-circle&quot;&gt;&lt;/i&gt;
&lt;/div&gt;
</code></pre>


<p>I have a div with <code>width: 180px;</code> and <code>height: 180px;</code>.<br>
How can I center a fontawesome icon horizontally and vertically inside the container?<br/>
Note: i may also add text below the icon</p>

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

<p>should look something like this:<br/>
<img src="https://i.stack.imgur.com/gIjwD.png" alt="enter image description here"></p>


How to center a fontawesome icon inside a div element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个width: 180px;和height: 180px;的div。如何在容器内水平和垂直地对方舟形图标进行居中？注意:我也可以在图标下面添加文本。<div style="width:180px; height:180px; float:left;">  <i class="fa fa-search fa-4x"></i></div>应该是这样的：​

问如何在div元素中居中方框图标
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div元素中居中方框图标EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div元素中居中方框图标
EN