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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个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; 
}

这里是我的形象看起来像：

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

中的图像在屏幕截图不居中以上它们对齐到列

回答：

哪里是ALIGN-顶部的CSS的左侧？我不知道这个班是做什么的。从您的图片

  • 删除对齐，顶部和无边距顶班

  • 添加类我对齐或将其命名为任何你想要的（但是在CSS类名应该是相同的 - ： 试试这个记住）

并在CSS它应该看起来像：

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

是你想要的吗？

以上是 对齐引导列的两个图像行内中心 的全部内容， 来源链接： utcz.com/qa/258572.html

回到顶部