Bootstrap 4 media horizontal center

Question

La question est dans le titre. Comment centrer un média à l'horizontale ?

Mes médias :

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

Le {{ $user->avatar }} provient de Laravel.

Answer 1

Vous pouvez faire de la colonne une flexbox et définir son 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>

Remarque : Il n'est pas nécessaire de spécifier la version de tous les points d'arrêt de col-12 . Vous n'avez besoin que de la plus petite, si toutes les colonnes sont occupées par 12 colonnes.

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>

Essayez d'ajouter la classe justify-content-center, si cela ne fonctionne pas, ajoutez la classe text-center. Si cela ne fonctionne pas, utilisez flexbox. boîte-apprentissage-flex