居中字體 - 真棒stackedicons

Question

我想中心2堆疊FA圖標，但文本對齊似乎沒有任何效果。下面的代碼：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="col-md-3"> 
 
    <span class="fa-stack fa-4x"> 
 
      <i class="fa fa-circle fa-stack-2x text-primary"></i> 
 
      <i class="fa fa-user fa-stack-1x fa-inverse"></i> 
 
     </span> 
 
    <h4 class="text-center">Title</h4> 
 
    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</div>

Answer 1

• 添加.text-center父<div>
• 從<h4>刪除
• 將.text-left添加到<p>（除非您希望段落文本也居中）。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="col-md-3 text-center"> 
 
    <span class="fa-stack fa-4x"> 
 
      <i class="fa fa-circle fa-stack-2x text-primary"></i> 
 
      <i class="fa fa-user fa-stack-1x fa-inverse"></i> 
 
     </span> 
 
    <h4>Title</h4> 
 
    <p class="text-muted text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
</div>

Answer 2

試試這個

<div class="col-md-3"> 
    <span class="fa-stack fa-4x"> 
     <i class="fa fa-circle fa-stack-2x text-primary">ico#1</i> 
     <i class="fa fa-user fa-stack-1x fa-inverse">ico#2</i> 
    </span> 
    <h4 class="text-center">Title</h4> 
    <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 

.col-md-3 { 
    text-align: center; 
} 

現場演示 - https://jsfiddle.net/gzkjp2jk/

Answer 3

短期和簡單的答案是 添加此標籤

<center> 
the text that you wanted to place in center 
</center>