Центрирование шрифтов - Удивительные штабелированные элементы

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>
• Удалить .text-center от <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>