Question

我目前正在使用2个Font Awesome图标。问题是我想在每个与这些图标对齐的文本下添加文本。问题是文本以页面为中心，但不在相应的图标下。

代码：

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1 class="brand-heading">Title</h1>
            <p class="intro-text">description</p>
            <a href="#about" class="btn btn-circle page-scroll btn-lg">
                <i class="fa fa-angle-double-down animated"></i>
            </a>
            <a href="#contact" class="btn btn-circle page-scroll">
                <i class="fa fa-angle-double-up animated"></i>
            </a>
        </div>
    </div>About   Contact
</div>

Answer 1

如果对父元素进行文本对齐，则它将由图片继承。

CSS

.container {
    text-align: center;
}

Answer 2

我认为这就是你想要做的。这是小提琴：

http://jsfiddle.net/plushyObject/02s7wnm8/

            <div class="col-md-8 col-md-offset-2 text-center outline">
                <h1 class="brand-heading">Title</h1>
                <p class="intro-text">description</p>
                <div class="col-sm-4 outline">
                    <a href="#about" class="btn btn-circle page-scroll btn-lg outline">
                        <i class="fa fa-angle-double-down fa-fw"></i>
                    </a>
                    <p class="outline">
                        Text is centered by 'text-center' class inherited from first 
                        column.
                    </p>
                </div>
            </div>

Answer 3

使用HTML <table>排列，然后使用CSS设置样式。这样它就能正确地保持在图标之上。

尝试在Font Awesome图标下排列文本

3 个答案:

http://jsfiddle.net/vd6smL75/