Center Image in Column

[design4web]

I’m trying to vertically and horizontally center logos in columns across a row.

I used the custom CSS from another thread and added the class vcenter:
.vcenter .x-container .x-column {
display: flex;
align-items: center;
}

.vcenter .x-container {
display: flex;
flex-flow: row wrap;
justify-content: center;
}

That made the images vertically centered but aligned to the left of the column.

http://www.new.4inno.com/home/

[thai]

Hi There,

Please update your custom CSS to this:

.vcenter .x-container .x-column {
    display: flex;
    align-items: center;
    margin-right: 0;
}

.vcenter .x-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.vcenter .x-container .x-column .x-image {
    margin: 0 auto;
    display: block;
    float: none;
    padding: 0 15px;
}

Hope it helps

[design4web]

That worked, thanks.

One other question, I don’t want these logos to stack when in mobile few.

I think I need to add a media query to do that, but am not sure what I need to put inside of it.

Thanks.

[mldarshana]

Hi there,

Could you please try adding the following CSS rule and see if that helps.

@media(max-width:480px){
  .vcenter .x-container .x-column {
    width: 20%;
  }
}

Thanks!