Bootstrap 4媒体水平中心[重复]答案

【问题标题】：Bootstrap 4 media horizontal center [duplicate]Bootstrap 4媒体水平中心[重复]
【发布时间】：2019-01-13 19:34:37
【问题描述】：

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

我的媒体：

<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。

【问题讨论】：

媒体是否有已知宽度？
是容器的宽度。 1110像素

标签： html css bootstrap-4

【解决方案1】：

您可以将列设为弹性框并设置其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 列，您只需要最小的一个。

【讨论】：

谢谢！有效。一个问题。如果我只使用一个col，我需要一行吗？ 注意：您不需要指定所有断点的 col-12 版本。如果全部占用 12 列，您只需要最小的一个。 Aight
@Trexon：不。如果您打算放置一个始终占用容器所有可用宽度的<div>，您甚至不需要row 和col-12 类。如果您打算根据断点更改宽度，则只需要row 和不同版本的col-12。但是row 和col-* 类必须一起使用——只要有行，就必须有列。
好吧。谢谢！ :) 我要学习 flexbox！ :D
@Trexon：这是一个好的开始：css-tricks.com/snippets/css/a-guide-to-flexbox

【解决方案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

【讨论】：