vertically center posts (currently left:0)

[sankParticipant]

hi,
trying to use an instance of the RPP vertically but the images are all left:0 and absolute.

i cant seem to figure out how to make them vertical center on the right side: http://feel.subpac.com/testing/

This is my CSS:

.rpp_container>legend {
display: none !important;
}
.rpp_container {
width:100%;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.rpp_wrapper {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.rpp_wrapper .rpp_item {
margin: auto !important;
text-align: center !important;
}
.rpp_item .rpp_inner {
text-align: center !important;
position: relative !important;
margin-left: auto !important;
margin-right: auto !important;
}
.rpp_container>legend {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
font-weight: bold !important;
}
.rpp_wrapper .rpp_item .rpp_title {
padding: 0px 0px !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}

[Ernest MarcinkoKeymaster]

Solution 1

You could possibly try this as well to your code:

.rpp_item.rpp_visible {
    position: static !important;
}

It will change the item position back to static, but it will be much easier to center. The ordering will be most likely changed or reversed, since it’s determined by the absolute position. But if that’s not a big issue, then this is the best option.

Solution 2

If the order matters, then changing the wrapper to a table layout and then transforming the elements to force them to middle. In this case your CSS code is not needed, only this:

.rpp_wrapper { display: table !important; }

.rpp_item.rpp_visible {
    left: 50% !important;
    transform: translate(-50%, 0) !important;
}

I hope this helps 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[sankParticipant]

hi
thanks for getting back to me! 🙂

i tried the position: static, that worked well but as you said the order is reversed
– is there a way to randomize the order each time the page is refreshed? that’d be a great feature…

as for trying display: table, transform: translate(-50%, 0) pushes it outside the box, not centered.

it required margin: auto !important; as well to center 🙂

[Author]

Posts