如何为两列内容、图片或文本单独设置padding，实现自定义垂直对齐

不需要拆分独立div，也不需要使用table布局，利用Bootstrap5栅格自带的flex布局能力就能实现需求。你之前调整padding导致整块下移是因为你给外层容器加了内边距，会作用于容器内所有内容，所以整体位移。

实现步骤 #

• 给承载左右两栏的.row元素添加Bootstrap内置类align-items-center，即可让两栏内容在垂直方向居中对齐，实现左侧文本的垂直居中效果
• 给右侧放置图片的.col-lg-6元素添加负上外边距，比如用Bootstrap内置类mt-n4（数字越大上移幅度越大，可根据你的视觉需求调整数值），即可实现右侧内容略微靠上的效果

代码修改示例 #

HTML 修改部分（仅改row和右侧列的类即可） #

<!-- 原row标签替换为下方代码 -->
<div class="row align-items-center">
  <div class="col-lg-6">
    <h1>Find a study buddy to learn with.</h1>
    <button type="button" class="btn btn-outline-light btn-lg"><i class="fas fa-sign-in-alt"></i> Learn More </button>
  </div>

  <!-- 右侧图片列添加负边距类 -->
  <div class="col-lg-6 mt-n4">
    <img src="https://i.imgur.com/jLHT8lu.png" alt="gif" width="100%" height="auto">
  </div>
</div>

自定义CSS实现（如果不想用Bootstrap内置类） #

如果不想使用Bootstrap的内置工具类，可以在你的CSS文件中添加以下代码：

/* 让行容器内子项垂直居中 */
#title .row {
  display: flex;
  align-items: center;
}
/* 右侧图片列上移，数值可自行调整 */
#title .col-lg-6:last-child {
  margin-top: -1.5rem;
}

内容的提问来源于stack exchange，提问作者Priyanka