在div中居中两个图像

Question

我有以下div

<div id = "photos">
    <%= image_tag("profile.jpg", :id => "profile", :class => "img-thumbnail")%>
    <%= image_tag("coverEagle.jpg", :id => "banner") %>

</div>

这是相关的css

#photos{
    align-items: middle;
    margin-left:auto;
    margin-right: auto;
}
#banner{
    max-height:270px;
    width:900px;
    max-width:100%;
}
#profile{
    height: 150px;
    width: 150px;
    position: absolute;
}

我试图将配置文件图像置于照片div中，但似乎上面的代码不起作用。有没有办法实现这个目标？

Answer 1

您正试图将#profile图像居中，但没有代码试图将其居中。

这是一个位置绝对形象，所以这样的事情应该有效。

#profile {
    position:absolute;
    margin: 0 auto;
    left:0;
    right:0;
    height: 150px;
    width: 150px;
}

其他方式是添加：

#photos{
    display:flex;
    justify-content:center;
}

它会将所有物品集中在里面。