Question

我正在编写代码以使用引导程序创建响应式网站。我的问题占用了很多时间，我无法解决。我有以下代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="home">
    <div class="container-fluid" style="background: rgba(234, 234, 234)">
        <div class="d-flex w-100">
            <div class="d-flex col justify-content-start" style="background:blue">
                <p>Logo</p>
            </div>
            <div class="d-flex col justify-content-center" style="background:red">
                <p>Info</p>
            </div>
            <div class="d-flex col justify-content-end" style="background:green">
                <p>Login</p>
            </div>
        </div>
    </div>
</div>

我想使文本垂直对齐，以使其始终居中，例如，如果我调整了移动设备的页面大小。我已经尝试了很多东西，但是我做不到。

Answer 1

class "align-items-center" is what you needed.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div id="home">
  <div class="container-fluid" style="background: rgba(234, 234, 234)">
    <div class="d-flex justify-content-center align-items-stretch">
      <div class="col d-flex justify-content-center align-items-center" style="background:blue">
        <p>Logo</p>
      </div>
      <div class="col d-flex justify-content-center align-items-center" style="background:red">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      </div>
      <div class="col d-flex justify-content-center align-items-center" style="background:green">
        <p>Login</p>
      </div>
    </div>
  </div>
</div>

Flex div内的垂直对齐问题

1 个答案: