html - 定位 Font Awesome 图标和一个段落

Question

我想将图标放置在句子的顶部，并且都在 Bootstrap 列中居中。我尝试更改段落和图标在 css 中的位置和显示，但它不起作用。现在看起来像这样

我希望它是这样的

代码如下

#home-info {
    width: 500px;
    height: 200px;
    background-color: rgba(0,0,0,0.7);
    top: 550px;
    z-index: 1;
    position: absolute;
    
}

.col-md-3 {
    height: 100px;
    background-color: #1e2c38;
    text-align: center;
    color: white;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}

.col-md-4 {
    height: 300px;
    text-align: center;
    background-color: #1b2328;
}

.col-md-3 p {
    position: relative;
    width: 300px;
    text-align: center;
}

 <div class="container-fluid"> <!-- HOME INFO -->
                
                <div class="row">
                    <div class="col-md-3" id="navy2">
                        <div class="content-container">
                            <i class="fa fa-newspaper-o fa-3x" aria-hidden="true"></i>
                            <p>Learn more about our recent events and news!</p>
                        </div>
                    </div>
                    <div class="col-md-3" id="navy3">
                        <div class="content-container">
                            <i class="fa fa-calendar fa-3x" aria-hidden="true"></i>
                            <p>Stay up to date! Get the school's calendar here!</p>
                        </div>
                    </div>
                    <div class="col-md-3" id="navy2">
                        <div class="content-container">
                            <i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i>
                            <p>Like and connect with us via Facebook!</p>
                        </div>
                    </div>
                    <div class="col-md-3" id="navy3">
                        <div class="content-container">
                            <i class="fa fa-youtube fa-3x" aria-hidden="true"></i>
                            <p>Learn more about us through our videos!</p>
                        </div>
                    </div>
                </div> <!-- ROW --> 

谢谢!

Answer 1

您可以通过将内部 p 设为 display:block 元素并使用 margin: 0 auto 使其居中...

.col-md-3 p {
    position: relative;
    width: 300px;
    display: block;
    margin: 0 auto;
}

http://www.codeply.com/go/kFJwok7k0T

但是，因为您在 .col-md-3 p 上设置了 300px，文本将在较小的宽度处被截断。最好不要在 .col-md-3 p 上设置任何特定宽度，这样它才能响应。