我想将图标放置在句子的顶部,并且都在 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 -->
谢谢!
最佳答案
您可以通过将内部 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
上设置任何特定宽度,这样它才能响应。
关于html - 定位 Font Awesome 图标和一个段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42616947/