对齐引导列的两个图像内联中心

Question

我有一个 html 模板，我想将 bootstrap 集成到其中。我目前在引导列中有两个图像。我想保持这两个图像对齐并彼此相邻，同时将它们都放在列的中间。当我尝试它时，它们要么不居中，要么不居中，这是我不想要的。我希望两个图像居中并彼此相邻......这是我的代码：

  <div class="row justify-content-center">

        <div class="col-xl-6">
          <img class="welcome-icon-size align-top center-block" src="{% static 'images/untitled-2.png'%}" alt="Generic placeholder image">
          <img class="welcome-name-size no-margin-top center-block" src="{% static 'images/untitled-1.png'%}" alt="Generic placeholder image">
        </div>

  </div>

这是css：

.no-margin-top {
  margin-top: 0px !important;
}

.no-padding {
  padding: 0em !important;
}

.welcome-icon-size {
  height: 9.55em !important;
}

.welcome-name-size {
  height: 14em !important;
}

.welcome_title {
  font-size: 1em !important
}

.welcome-center-items {
  align-items: center !important;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

这是我的图像的样子：

我希望它看起来像以下但居中::

图像在上面的屏幕截图中未居中，它们与列的左侧对齐

Answer 1

align-top的css在哪里？我不知道这个班是做什么的。 试试这个：

• 从图片中移除 align-top 和 no-margin 顶级类
• 添加类 my-align 或任意命名（但在 css 中类名应该相同 - 记住这一点）

在 css 中应该是这样的：

.my-align { margin:0;padding:0;width:50%;float:left; }

这是你想要的吗？