PHP Laravel NGINX html css Bootstrap Python Symfony Apache Windows linux jquery Django ASP vanilla Slim vagrant docker Homestead MySQL Redis Git SVN ssh Root vim PhpStorm Pycharm sass less PHP Laravel android html css Vue Angular React NGINX html css Javascript

Bootstrap 4 水平排列、垂直排列及水平、垂直居中详解

原创

原创不易 ~ 转载请注明出处哦

在网页排版中,我们经常需要一个元素水平及垂直居中以提高页面的美观程度。

那么在Bootstrap 4中,我们来看一下如何水平及垂直排列元素。

假设我们有以下结构:

<div class="container">
    <div class="text-left">
        <a>https://blog.sbot.io</a>
    </div>
    <div class="text-left">
        <strong>text-left</strong>
    </div>
</div>

那么如果我们想让<a><strong>元素水平居于页面中部,应该怎么办呢?
在水平排列中,对于inline元素(例如<a>, <span>, <strong>等),我们可以使用text-lefttext-centertext-right来快速进行左,中,右对齐:

<div class="container">
    <div class="text-left">
        <a>https://blog.sbot.io</a>
    </div>
    <div class="text-left">
        <strong>text-left</strong>
    </div>

    <div class="text-center">
        <a>https://blog.sbot.io</a>
    </div>
    <div class="text-center">
        <strong>text-center</strong>
    </div>

    <div class="text-right">
        <a>https://blog.sbot.io</a>
    </div>
    <div class="text-right">
        <strong>text-right</strong>
    </div>
</div>

bs4-text-align.png

但是这里我们注意到,我们未对父级block元素宽度未进行设置,那么此时父级<div>元素默认宽度将是container宽度扣去padding值。那么如果我们的父级元素宽度变窄了呢?

<!-- 未设定父级元素宽度 -->
<div class="container bg-primary">
    <div class="text-center bg-warning">
        <a>https://blog.sbot.io</a>
    </div>
    <div class="text-center bg-warning">
        <strong>text-center</strong>
    </div>
</div>
<!-- 已设置父级元素宽度 -->
<div class="container bg-primary">
    <div class="text-center bg-warning w-50">
        <a>https://blog.sbot.io</a>
    </div>
    <div class="text-center bg-warning w-50">
        <strong>text-center</strong>
    </div>
</div>

那么你会发现这个时候我们的文字并未如我们预料的居于页面中间。
bs4-block-text-align.png

我们可以看到图中上下两个排列的区别,第一个是我们block元素(子<div>元素)未指定宽度,而第二个是我们指定了子<div>元素宽度为父级元素(div.container)的50%

所以text-align属性会将inline元素放置于直属父级block元素的中间。

而要使block元素整体居中,我们需要使用row或者d-flex

<!-- 使用row居中 -->
<div class="container bg-primary">
    <div class="row mx-0 justify-content-center">
        <div class="text-center bg-warning w-50">
            <div>
                <a>https://blog.sbot.io</a>
            </div>
            <div>
                <strong>text-center</strong>
            </div>
        </div>
    </div>
</div>
<!-- 使用d-flex居中 -->
<div class="container bg-primary">
    <div class="d-flex justify-content-center w-100">
        <div class="text-center bg-warning w-50">
            <div>
                <a>https://blog.sbot.io</a>
            </div>
            <div>
                <strong>text-center</strong>
            </div>
        </div>
    </div>
</div>

bs4-block-row-align-center.png

注意,我在rowd-flex这层<div>中明确加入了w-100,如果不加也是可以的,这样元素会继承父级container宽度,加入w-100是为了提醒大家在使用rowd-flex时注意确定block元素的宽度,否则可能会出现你意想不到的页面排列。


我们现在已经完成了元素的水平排列,那么如果我们想继续上一步,将子元素垂直居中于父元素中间呢?
这个时候我们需要使用align-items-center这个类:

<!-- 使用row -->
<div class="container bg-primary py-5">
    <div class="row mx-0 justify-content-center align-items-center w-100">
        <div class="text-center bg-warning w-50">
            <div>
                <a>https://blog.sbot.io</a>
            </div>
            <div>
                <strong>text-center</strong>
            </div>
        </div>
    </div>
</div>
<!-- 使用d-flex -->
<div class="container bg-primary py-5">
    <div class="d-flex justify-content-center align-items-center w-100">
        <div class="text-center bg-warning w-50">
            <div>
                <a>https://blog.sbot.io</a>
            </div>
            <div>
                <strong>text-center</strong>
            </div>
        </div>
    </div>
</div>

block-vertical-alignment.png

OK,很完美,现在问题来了!我们刚才的讲解中,并未包含表格,那如果我们要使用表格,该怎么水平居中或垂直居中呢?

水平居中简单,text-center就可以直接搞定,但是如果我们尝试在<td>中加入rowd-flex,我们发现并不能成功地进行垂直居中。怎么办呢?

这个时候,我们需要用到vertical-alignment的类。

<table class="table table-bordered text-white">
    <thead>
    <tr class="bg-primary">
        <th>#</th>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
    </tr>
    </thead>
    <tbody>
    <tr class="bg-dark">
        <th class="text-danger">1</th>
        <td>
            This is a remarkably long sentence. And... surprisingly you can see that it spreads three lines!
            This is a remarkably long sentence. And... surprisingly you can see that it spreads three lines!
        </td>
        <td>
            This is a remarkably long sentence. And... surprisingly you can see that it spreads three lines!
            This is a remarkably long sentence. And... surprisingly you can see that it spreads three lines!
        </td>
        <td class="text-danger">Python</td>
    </tr>
    </tbody>
</table>

bs4-table-align-middle-1.png

我们看到,table中的两个cells的内容都在上部,我们希望将其居中,那么我们只需要给<td>加上align-middle这个类就可以了:

<table class="table table-bordered text-white">
    <thead>
    <tr class="bg-primary">
        <th>#</th>
        <th>First</th>
        <th>Second</th>
        <th>Third</th>
    </tr>
    </thead>
    <tbody>
    <tr class="bg-dark">
        <th class="align-middle text-success">1</th>
        <td>
            This is a remarkably long sentence. And... surprisingly you can see that it spreads three lines!
            This is a remarkably long sentence. And... surprisingly you can see that it spreads three lines!
        </td>
        <td>
            This is a remarkably long sentence. And... surprisingly you can see that it spreads three lines!
            This is a remarkably long sentence. And... surprisingly you can see that it spreads three lines!
        </td>
        <td class="align-middle text-success">Python</td>
    </tr>
    </tbody>
</table>

bs4-table-align-middle-2.png

是不是比刚才看着舒服多了?

好了,今天就讲到这里,如果你还没有更新Bootstrap 4,那么我强力推荐你更新至BS4:)


正在加载验证码......
请先完成验证