如何使用 Bootstrap 5 使文本和图像在列中垂直居中？

Question

我的文字没有任何填充，但由于某种原因，有多余的填充导致我的文字移动到右上角。我尝试使用 Bootstrap 来对齐项目并证明接触合理，但我仍然无法弄清楚是什么导致了转变。由于我无法附上图片，这就是我想要实现的，这里有一个例子：https://cdn.optinmonster.com/wp-content/uploads/2020/11/Social-featured-image-How-to-Create-a-Landing-Page.jpg

我希望我的 text/h3/p/button 以图像为中心。

.name,
.intro {
  color: rgba(12, 11, 11, 0.6);
}

.name {
  font-size: 40px;
  font-weight: 700;
  font-family: 'DM Sans';
}

.intro {
  width: 525px;
  height: 107px;
  font-family: 'Ek Mukta';
  font-size: 25px;
  line-height: 40px;
}

#icon {
  margin: 10px;
  display: inline-block;
  width: 300px;
  height: 420px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container align-items-center justify-content-center">
  <div class="row justify-content-center ">
    <div class="col-md-6">
      <h3>Hi, I'm Ashley &#128075;</h3>
      
      <p class="intro">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem a, debitis, totam aa dddddd ddddd ddd aaaaaaaaa. </p>

      <br>
      <a href="projects.html"><button id="checkout-projects">Check out my projects!</button></a>
    </div>

    <div class="col-md-6">
      <img id="icon" src="https://via.placeholder.com/420x300" class="img-fluid">
    </div>
  </div>
</div>

Answer 1

您希望 align-items-center 在行上，这会影响其子元素的弹性框 cross-axis。我建议通过 Bootstrap flex docs and the CSS Tricks guide.

更好地了解 flexbox

.name,
.intro {
  color: rgba(12, 11, 11, 0.6);
}

.name {
  font-size: 40px;
  font-weight: 700;
  font-family: 'DM Sans';
}

.intro {
  width: 525px;
  height: 107px;
  font-family: 'Ek Mukta';
  font-size: 25px;
  line-height: 40px;
}

#icon {
  margin: 10px;
  display: inline-block;
  width: 300px;
  height: 420px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-6">
      <h3>Hi, I'm Ashley &#128075;</h3>
      
      <p class="intro">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem a, debitis, totam aa dddddd ddddd ddd aaaaaaaaa. </p>

      <br>
      <a href="projects.html"><button id="checkout-projects">Check out my projects!</button></a>
    </div>

    <div class="col-md-6">
      <img id="icon" src="https://via.placeholder.com/420x300" class="img-fluid">
    </div>
  </div>
</div>

如何使用 Bootstrap 5 使文本和图像在列中垂直居中？

How can I center text and images vertically across columns with Bootstrap 5?

html

css

bootstrap-5