在FontAwesome Icon旁边的Bootstrap中对齐文本

Question

我难以在标题和＃34;中对齐标题和段落文字。 ＆＃34;无＆＃34;你看到的是一个删除特定边距的类，与我想要完成的任务无关。

这是我的代码

<div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <h3>Test</h3>
        <p>text goes here</p>
    </div>
</div>

这是它正在做什么以及我希望它做什么。

感谢您的帮助！

Answer 1

我建议你对html结构稍作修改，并将文字内容包装在div内，并将其显示设为inline-block

<div class="col-md-4 none">
    <div class="well none">
        <i class="fa fa-user fa-4x fa-fw"></i>
        <div class="text">
           <h3>Test</h3>
           <p>text goes here</p>
        </div>
    </div>
</div>

和另外的div的css是

.text {
    display:inline-block;
}

Js Fiddle Demo

Answer 2

我会按照以下方式做到这一点。我喜欢使用嵌套的行来尽可能保持干净。

/** CSS **/
.well h3 {
    margin-top:0px;
}
.fs48 {
    font-size:48px;
}

/** HTML **/
<div class='row'>
    <div class='col-md-4'>
        <div class='well'>
            <div class='row'>
                <div class='col-xs-3 text-center'>
                    <span class='glyphicon glyphicon-user fs48'></span>
                </div>
                <div class='col-xs-9'>
                    <h3>Test</h3>
                    <p>text goes here</p>
                </div>
            </div>
        </div>
    </div>
</div>

请参阅此处的工作示例：http://jsfiddle.net/D2RLR/6779/

你可以简单地用字体awesome类替换字形。