Bula Bula - 3 months ago 6
CSS Question

Centring two images within a div

I have the following div

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

</div>


Here is the relevant 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;
}


I am trying to centre the profile image inside the photos div however it seems that the code above does not work. Is there a way to achieve this?

Answer

You are trying to center the #profile image but there is no code trying to center it.

it's a position absolute image, so something like this should work.

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

other way is to add:

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

It'll center all the items inside it.

Comments