Docs

[armintz]

Hello, I’m trying to vertically center the content (which is the revslider) of a single column in a 2-column row.

I’ve tried adding a class (“v-align”) to this column and the following css to the customizer:

/* VERTICAL ALIGN MIDDLE */
.v-align {
   float: none;
   margin-right: 3.5%;
   display: inline-block;
   vertical-align: middle;
}

It doesn’t seem to work – any idea why? My site is password protected and i’ll send a private reply with credentials.

Thank you

[armintz]

This reply has been marked as private.

[Thai]

Hey There,

Please try with this CSS instead:

.v-align {
    white-space: nowrap;
    height: 480px;
    overflow: hidden;
}

.v-align:before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: '';
}
.v-align > div {
    vertical-align: middle;
    height: 100%;
    margin-top: 0;
    display: inline-block;
}

Hope it helps 🙂

[armintz]

looks great on desktop but creates huge margins on mobile version – see screenshot.

[Rad]

Hi there,

Please wrap your CSS with @media like this,

@media ( min-width: 768px ) {
.v-align {
    white-space: nowrap;
    height: 480px;
    overflow: hidden;
}

.v-align:before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: '';
}
.v-align > div {
    vertical-align: middle;
    height: 100%;
    margin-top: 0;
    display: inline-block;
}
}

Hope this helps.

[armintz]

perfect, thank you

[Darshana]

Glad we were able to help 🙂

[Author]

Posts