Bootstrap 4：不能垂直对齐中间文本

Question

我希望文本在中间垂直对齐，如果可能的话，更接近图像。但垂直对齐中间似乎不起作用。此外，当我更改屏幕的宽度时，它不会调整大小，而是从水平行转为垂直，并且无法保留在该部分中。

我目前在一个部分中有一个div行，它给出了我的结果：

更改屏幕宽度时：

代码：

<section style="background-color:lightblue;">
  <div class="container-fluid justify-content-center align-middle text-center pt-2 pb-2" style="max-height:600px">
    <div class="row no-gutters align-middle">
      <div class="col-lg-5">
        <h2>Text</h2>
        <p>Et qui deserunt nostrum epellatsitatibus et id veniam eius veniam animi repellat quas.</p>
      </div>
      <div class="col-lg-2">
        <img src='img\img_combined2.png' alt='' style="max-height:600px;"/>
      </div>

      <div class="col-lg-5 text-center align-middle">
      <h2>Text</h2>
        <p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiaeserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
      </div>
    </div>
  </div>
</section>

Answer 1

max-width:100%;
max-height:100%;

这可能会有所帮助 即使尺寸增加，也可以将它用于适合外部div的图像尺寸

Answer 2

将align-middle替换为align-items-center div

中的.row

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<section style="background-color:lightblue;">
  <div class="container-fluid justify-content-center align-middle text-center pt-2 pb-2" style="max-height:600px">
    <div class="row no-gutters  align-items-center">
      <div class="col-lg-5">
        <h2>Text</h2>
        <p>Et qui deserunt nostrum epellatsitatibus et id veniam eius veniam animi repellat quas.</p>
      </div>
      <div class="col-lg-2" style="height:600px">
        <img src='img\mywater_img_combine2.png' alt='' style="max-height:600px;"/>
      </div>

      <div class="col-lg-5 text-center align-middle">
      <h2>Text</h2>
        <p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiaeserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
      </div>
    </div>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

  

全屏查看