如何使用Twitter Bootstrap水平对准Glyphicons
如何使用Twitter Bootstrap水平对准Glyphicons
提问于 2018-05-08 08:31:16
我试图将我的FontAwesome图标置于我的Twitter Bootstrap代码中。
这是我的HTML：
<div id="frontpage-content" class="content">
<div class="container">
<div class="row">
<div class="col-lg-4">
<span>
<i class="fa fa-camera-retro fa-5x"></i>
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, inventore, ipsa dolorum laborum sit alias iusto nam quibusdam ad distinctio rerum expedita autem itaque delectus iste mollitia perferendis sint libero accusamus
in. Enim, natus necessitatibus pariatur optio explicabo consequuntur quod!</p>
</div>
<div class="col-lg-4">
<i class="fa fa-camera-retro fa-5x"></i>
<p>Ut, aliquid, aperiam, veniam modi voluptates maiores nesciunt libero fugiat illum recusandae cum similique et alias possimus error ex tenetur quasi sint eius dicta officia earum eveniet suscipit corporis autem deleniti nihil sed!
Earum blanditiis vel similique nisi fugit reprehenderit?</p>
</div>
<div class="col-lg-4">
<i class="fa fa-camera-retro fa-5x"></i>
<p>Quisquam eos aperiam autem atque minus modi similique earum! Ab, laboriosam odit non quo officiis asperiores atque dolorum omnis vitae in qui officia sequi molestias quisquam velit exercitationem aperiam. Voluptatum, unde, nesciunt
temporibus voluptates sint ab architecto at quod dolore.</p>
</div>
</div>
</div>
这是我已经尝试过的：
#frontpage-content {
background-color: $bgDefault;
i {
text-align:center;
}
span {
text-align:center;
}
}
但不适用于i元素。
我知道我可以居中它，如果我给周围的div一个静态宽度，然后将i元素放置...
margin-right: auto;
margin-left: auto;
display: block;
...但我不想给周围的div一个静态宽度。
那么，如何解决这个问题，而不应用静态宽度？
回答 2
Stack Overflow用户
发布于 2018-05-08 17:26:13
所有你需要的是定义display:block与text-align:center在i您的容器内div，你就会有它：
.col-lg-4 i {
display:block;
text-align:center
}
text-align:center只能在块级元素或您明确设置的元素上使用display:block，在那里，我需要指定，因为我用它i，这是一个内联元素。
虽然它确实不是CSS而是HTML，但这不是一个问题，更大的问题是它已被弃用。
Stack Overflow用户
发布于 2018-05-08 18:07:13
<div class="text-center">
<i class="fa fa-camera-retro fa-5x></i>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100004042
复制相关文章
相似问题