html - Bootstrap 4 : Center an image in a flex-row

Question

我正在尝试创建一个包含 3 个组件的 flex 行:[TEXT、IMG、TEXT]。我希望 IMG 居中(在完美的中心)。

我试图让我的 2 个段落具有相同的宽度，以便我的 IMG 居中。

这是我的代码:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="jumbotron shadow-sm">

    <div class="d-flex flex-row justify-content-center align-items-center">

        <div class="d-flex justify-content-start flex-grow-1 ml-3">
            <p>Small content on the left</p>
        </div>
        <div class="d-flex justify-content-center flex-grow-1">
            <img src="https://d1guu6n8gz71j.cloudfront.net/system/video/previews/1939344/big.png?1549617786" width="100px">
        </div>
        <div class="d-flex justify-content-end flex-grow-1 mr-3">
            <p>very big content on the right very big content on the right</p>
         </div>

    </div>

</div>

我读到我可以使用 flex-basis，我试过了，但没有令人满意的结果。我应该遗漏了一些东西。

Answer 1

尝试使用 col类

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<div class="jumbotron shadow-sm">

  <div class="d-flex justify-content-center align-items-center">

    <div class="col">
      <p>Small content on the left</p>
    </div>
    
    <div class="col text-center">
      <img src="https://d1guu6n8gz71j.cloudfront.net/system/video/previews/1939344/big.png?1549617786" width="100px">
    </div>
    
    <div class="col">
      <p>very big content on the right very big content on the right</p>
    </div>

  </div>

</div>