中心字体 - 令人敬畏的stackicons

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-center
• 将.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

简短的答案就是添加这个标签

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

Answer 3

尝试这个

<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/