Home › Forums › Product Support Forums › Related Posts Pro for WordPress Support › vertically center posts (currently left:0)
This topic contains 2 replies, has 2 voices, and was last updated by sank 7 years, 6 months ago.
- AuthorPosts
- February 15, 2017 at 6:30 pm #11968
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;
}February 16, 2017 at 11:08 am #11972Solution 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 :)
February 16, 2017 at 4:39 pm #11983hi
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 🙂
- AuthorPosts
The forum ‘Related Posts Pro for WordPress Support’ is closed to new topics and replies.