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

-1

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

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

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

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

来源

2017-12-02 Omar Jandali

可能的重复[如何将两个图像并排放入div使用bootstrap？]（https://stackoverflow.com/questions/26647890/how-to-place-two-image-side-by-side -into-a-div-using-bootstrap） – Rob

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

删除对齐，顶部和无边距顶班
添加类我对齐或将其命名为任何你想要的（但是在CSS类名应该是相同的 - ：试试这个记住）

并在CSS它应该看起来像：

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

是你想要的吗？

来源

2017-12-02 22:23:40 Trueman

我添加了一个我希望它看起来像的图像，但它的中间居中。请看帖子我已经更新了 –

它很有用。一件事是，它将两幅图像调整为适合列的整个宽度。有没有什么办法可以让图像保持原来的大小，并将图像居中放置，而不会影响图像。 –

我得到它的工作 –

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

回答

相关问题