Bootstrap 5 justify-content 无法正常工作并且无法垂直居中内容答案

【问题标题】：Bootstrap 5 justify-content not working correctly and cannot vertically center contentBootstrap 5 justify-content 无法正常工作并且无法垂直居中内容
【发布时间】：2022-04-08 23:05:03
【问题描述】：

我有以下代码，我正在使用引导程序 5：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<br><br>

<div class="list-group-item d-flex flex-row">
    <div class="flex-column">
      <h4>A Test Recipe</h4>
      <p>This is simply a test</p>
    </div>

    <div class="flex-row align-self-center justify-content-end">
      <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
           alt="A Test Recipe"
           style="max-height: 50px !important">
    </div>
</div>

我正在尝试将图像放到list-group-item div 的末尾。我尝试使用justify-content-end，但这没有效果。我也试过align-self-end这也不会把图像带到右边。

对于带有flex-column 类的 div，我正在尝试将其内容垂直居中。但它也不起作用，它应该像图像一样居中。我通过使用align-self-center 类使图像垂直居中。但是，当我将此类应用于具有 flex-column 类的 div 时，它不起作用。

我做错了什么？

【问题讨论】：

标签： html css bootstrap-4 flexbox

【解决方案1】：

试试这个。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>

<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
    <div class="card m-3 border-0" style="max-width: 350px;">
        <div class="row g-0">
            <div class="col-5">
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     class="img-fluid rounded-3"
                     alt="A Test Recipe">
            </div>
            <div class="col-7">
                <div class="card-body">
                    <h5 class="card-title">A Test Recipe </h5>
                    <p class="card-text">This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list-group-item d-flex justify-content-center align-items-center flex-wrap">
    <div class="card m-3 border-0" style="max-width: 250px;">
        <div class="row g-0">
            <div class="col-5">
                <img src="https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_1280.jpg"
                     class="img-fluid rounded-5"
                     alt="A Test Recipe">
            </div>
            <div class="col-7">
                <div class="card-body">
                    <h5 class="card-title">A Test Recipe </h5>
                    <p class="card-text">This is simply a test.</p>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。