对齐引导列的两个图像行内中心
我有一个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; }
是你想要的吗?
我添加了一个我希望它看起来像的图像,但它的中间居中。请看帖子我已经更新了 –
它很有用。一件事是,它将两幅图像调整为适合列的整个宽度。有没有什么办法可以让图像保持原来的大小,并将图像居中放置,而不会影响图像。 –
我得到它的工作 –
可能的重复[如何将两个图像并排放入div使用bootstrap?](https://*.com/questions/26647890/how-to-place-two-image-side-by-side -into-a-div-using-bootstrap) – Rob