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列，则只需要最小的一个即可。

Answer 2

<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 justify-content-center">
                <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>

尝试添加类justify-content-center，如果不起作用，请添加类text-center。如果不起作用，请使用flexbox。 learn-flex-box

Bootstrap 4媒体水平居中

2 个答案: