html - Bootstrap 4媒体水平居中

Question

问题就在标题里。如何使媒体水平居中？

我的媒体:

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            <div class="media">
                <img class="mr-3" src="{{ $user->avatar }}" alt="Avatar">
                <div class="media-body">
                    <h5 class="mt-0">Trexon</h5>
                    <p>LOL</p>
                </div>
            </div>
        </div>
    </div>
</div>

{{ $user->avatar }} 来自 Laravel。

Answer 1

您可以将该列设置为 flexbox 并设置其 justify-content: center;。

<div class="container">
    <div class="row">
        <div class="col-12 d-flex flex-row justify-content-center">
            <div class="media">
                <img class="mr-3" src="{{ $user->avatar }}" alt="Avatar">
                <div class="media-body">
                    <h5 class="mt-0">Trexon</h5>
                    <p>LOL</p>
                </div>
            </div>
        </div>
    </div>
</div>

注意:您无需指定 col-12 的所有断点版本。如果全部占据 12 列，那么您只需要最小的一个。