对齐bootstrap col的两个图像内联中心

Question

我有一个html模板，我想将bootstrap整合到其中。我目前在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

对齐顶部的css在哪里？我不知道这堂课做了什么。 试试这个：

• 从图片中删除对齐顶部和无边距顶级类
• 添加类my-align或将其命名为任意（但在css中，类名应该相同 - 请记住）

在css中应该看起来像：

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

是你想要的吗？