帶文本的居中圖標

我試圖居中一個圖標和一些文本，看起來我無法正確理解。我知道這看起來很容易，但我剛開始，我無法想出辦法做到這一點。這是代碼：帶文本的居中圖標

<div class="row"> 
    <div class="col-sm-4"> 
     <div class="features-icon"> 
      <div class="outter-circle"> 
       <div class="inner-circle"> 
        <i class="fa fa-rocket"></i> 
       </div> 
      </div> 
     </div> 
     <div class="features-text"> 
      <span id="features-title"><h3>High Quality Services</h3></span> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris dui, laoreet vitae elementum a, feugiat nec tortor. Sed quam neque, ultricies nec est id, accumsan porttitor tellus.</p> 
      <hr> 
     </div> 
    </div> 
</div>

我嘗試：

.features-text { 
    width: 100%; 
} 
.features-icon { 
    width: 50%; 
    margin: 0 auto; 
}

但它不是在中間完全集中，我也有問題，當我調整瀏覽器窗口。

也許我不清楚，所以我上傳了一些圖片。

它是如何沒有任何造型。

http://tinypic.com/r/k99awh/8

並與我施加造型所述第二圖像。

http://tinypic.com/r/2607jac/8

正如你可以看到它不是完全居中...任何幫助嗎？ :)

來源

2015-08-25 Ovidiu G

使用text-align: center;

.row { 
 
    text-align: center; 
 
}

<div class="row"> 
 
    <div class="features-icon"> 
 
    <i class="fa fa-rocket">YOUR ICON</i> 
 
    </div> 
 
    <div class="features-text"> 
 
    <span id="features-title"><h3>High Quality Services</h3></span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mauris 
 
     dui, laoreet vitae elementum a, feugiat nec tortor. Sed quam neque, 
 
     ultricies nec est id, accumsan porttitor tellus. 
 
    </p> 
 
    </div> 
 
</div>

jsfiddle

來源

2015-08-25 14:17:52 smoggers

不知怎的，它似乎並不爲我工作。我看到它在你的代碼片段，但它不會做任何東西在我的代碼.. –

感謝您的幫助！這是我應用的樣式的鏈接。 https://jsfiddle.net/9ys8pwrj/ –

它的工作原理！非常感謝！：D我在開始的時候，所以我可能會犯很多錯誤，但我希望我會好起來的。我需要在1個月內處理很多信息哈哈 –

帶文本的居中圖標

回答

相關問題