如何集中fontawesome图标？

我想在我的中间我的fontawesome图标居中。他们在一个容器里。我正在使用Bootstrap和引导程序的网格系统。我已经尝试过使用text-align：center;但它不起作用。如何集中fontawesome图标？

这是我的HTML代码：

<div class="row"> 
    <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div> 
    <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div> 
    <div class="col-md-1"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div> 


</div>

而且，这里是我的CSS代码：

.icon { 
    text-align: center; 
    display:inline-block; 
}

来源

2017-04-09 smaxxx

尝试给文本中心CSS的 'COL-MD-1' –

什么是 “中间” 对他们不？在什么中间？ – mayersdesign

如果你的意思是这样的，@AzeezKallayi ''

或任本， '.COL-MD-1 { 文本对齐：中心; ！重要 }' 我需要说它不起作用。 :( @mayersdesign我想把图标放在网站的中间，它们在左边。 – smaxxx

您是否尝试过补充一点： '

.row{ 
    display: flex; 
    justify-content: center; 
}

And s欧姆左右边距将它们分开。

来源

2017-04-09 12:31:08

不，我没有，但是这个修复了。你非常非常喜欢！ – smaxxx

很开心帮你。 –

您需要申请“文本中心”类像这样的“行”类：

<div class="row text-center"> 
    <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div> 
    <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div> 
    <div class="col-md-4"><i class="icon fa fa-5x fa-map-marker" aria-hidden="true"></i></div> 
</div>

你不需要再用“中心块”级。另外，如果它的连续3列，你可以将它分成相等的宽度，用于前 - “col-md-4”而不是“col-md-1”。

这应该有所帮助。

来源

2017-04-09 12:36:02 Archana

这也解决了它。非常非常感谢你！ – smaxxx

伟大的帮助@smaxxx – Archana

你可以试试这个：

<div class="row"> 
    <div class="col-md-1"> 
     <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div> 
    </div> 
    <div class="col-md-1"> 
     <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div> 
    </div> 
<div class="col-md-1"> 
     <div class="align-center"><i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i></div> 
</div>

这.align伪中心拥有此属性：

.align-center 
{ 
    text-align: center; 
}

来源

2017-04-09 12:39:56

现在它工作正常。你可以试试这个代码：

.icon-container{ 
 
\t margin: 0 auto; 
 
\t display: table; 
 
}

<div class="row"> 
 
\t <div class="icon-container"> 
 
\t \t <i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i> 
 
\t \t <i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i> 
 
\t \t <i class="icon fa fa-5x fa-map-marker center-block" aria-hidden="true"></i> 
 
\t </div> 
 
</div>

来源

2017-04-09 12:41:00

如何集中fontawesome图标？

回答

相关问题