如何集中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圖標？

回答

相關問題