css - 对齐两个图像的内联中心 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

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

• 从您的图像中删除对齐顶部和无边距顶部类
• 添加类 my-align 或任意命名(但在 css 中，类名应该相同 - 请记住这一点)

在 css 中它应该是这样的:

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

这是你想要的吗？