Question

我有两个引导程序列，一个包含文本，另一个包含图像。

首先，我想使该行中的两列垂直居中。

第二，如果图像高度小于文本高度，反之亦然，我希望高度较小的图像垂直位于其列的中间。

#welcome-section {
  padding: 80px 60px;
}

#welcome-section .column {
  height: 100%;
}

#welcome-section .column .welcome-content,
#welcome-section .column img {
  width: 100%;
  height: auto;
}

#welcome-section .column img {
  -webkit-box-shadow: 4px 4px 10px #000;
  box-shadow: 4px 4px 10px #000;
}

#welcome-section .column .welcome-content .welcome-txt {
  color: #102542;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

#welcome-section .column .welcome-content .subhead {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 1px;
}

#welcome-section .column .welcome-content p {
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
  <section id="welcome-section">
    <div class="container">
      <div class="row">
        <div class="column col-lg-6 col-md-12">
          <div class="welcome-content">
            <p class="welcome-txt">Welcome</p>
            <h1 class="my-4">A New Vision of Luxury</h1>
            <p class="subhead my-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
            </p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde dolor est excepturi vitae perferendis totam quod sunt obcaecati ad maiores, eveniet nostrum eius libero voluptas repellat, dolores possimus nihil nam?</p>
            <span>- John Doe, Manager</span>
          </div>

        </div>
        <div class="column col-lg-6 col-md-12">
          <img src="https://images.pexels.com/photos/221457/pexels-photo-221457.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        </div>
      </div>
    </div>
  </section>
</body>

</html>

Answer 1

使用bootstrap 4，只需在行上添加“ align-items-center”类：

<div class="row align-items-center">
</div>

JSFiddle：https://jsfiddle.net/charlesartbr/n3mo0uzq/3/

如何将两列相对于彼此垂直居中？

1 个答案: