Question

我使用Twitter Bootstrap将文本和图像并排对齐。您能否想一想如何在中心对齐文本。

<div class="row">
    <div class="col-sm-1">
        <a href="ghfhg"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; box-sizing: content-box; line-height: 80px; text-align: center; width: 80px; height: 80px; display: inline-block; overflow: hidden; border-radius: 50%; background-color: rgb(224, 231, 237);"></i></a>
    </div>
    <div class="col-sm-2">
        sdsad
    </div>
</div>

我已经测试过文本中心它不能很好地工作： enter image description here

Answer 1

您可以使用 Bootstrap 4 类----CPU---- 1332 0.0 3.6 572960 5:56.04 /data/bin/gui 20978 0.0 0.5 79480 1:47.16 java 13043 0.0 0.0 18976 0:00.00 grep -E java|gui <iteration-number>来获得结果：

d-flex justify-content-center align-items-center

工作示例在这里：http://jsfiddle.net/4rLj200m/9/

Answer 2

只需将文本中心类添加到父元素即可。

<div class="row">
    <div class="col-sm-1">
        <a href="ghfhg"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; box-sizing: content-box; line-height: 80px; text-align: center; width: 80px; height: 80px; display: inline-block; overflow: hidden; border-radius: 50%; background-color: rgb(224, 231, 237);"></i></a>
    </div>
    <div class="col-sm-2 text-center">
        sdsad
    </div>
</div>

如何使用bootstrap在中心对齐文本

2 个答案: