-
Posts
-
Hi Guys
I am trying to align my content in each table cell to sit in the middle – to have an equal space top and bottom of the cell. I have tried
.pricing-table>li {
vertical-align: middle !important;
}
But this is not working?
I also tried:
.pricing-table>li:nth-child(even) {
background-color: #ffffff !important;
vertical-align: middle !important;
}
.pricing-table>li:nth-child(odd):not(.avia-heading-row) {
background-color: #f7fbff !important;
vertical-align: middle !important;
}
and also tried this…
.pricing-table>li { min-height: 160px!important; }
#top .avia_textblock table td,#top .avia_textblock table tr {
vertical-align: middle !important;
}
But again the vertical align is not working?Website URL: https://jag-marketing.com/packages/
Any support will be gratefully appreciated.
Cheers…
Kevin.Hi Guys – I would really appreciate if someone could have a wee look at this ticket to see if there is a solution…
Cheers.
Kevin.Hi,
Sorry for the delay. The vertical-align property will only work if the display property of the element is set to inline or table-cell. Unfortunately, setting either one of these values will break the current layout of the table.
Best regards,
IsmaelHi Ismael
Thanks for the update :)
Can you suggest an alternative layout that will work with the align middle – my client seems fixed on having the content middle aligned because it sits better on screen. Can you provide the code for me to try out anyway – I may be able to revise the layout if I need to.
Cheers.
Kevin.Is it possible to set padding for each column separately and could I also set padding for individual cells as this could be a possible work-around – not perfect but more in line with the client expectations?
What do you think – could you supply the code and I can try this?
Kevin.Hi,
Is it possible to set padding for each column separately
That is possible using nth-child selectors but it would be a bit more difficult to maintain. For example, to target the second cell in the second column, we can use this css code.
.avia-table .pricing-table-wrap:nth-child(2) .pricing-table li:nth-child(2) { padding: 100px 0; }For the 3rd cell in the 3rd column use this.
.avia-table .pricing-table-wrap:nth-child(3) .pricing-table li:nth-child(3) { padding: 80px 0; }The difficult part is that you may have to adjust these values on different screen sizes.
Best regards,
IsmaelHi Ismael,
So logically, if we can set the padding per cell then why can’t we set the cell to align text in the middle? It is quite confusing – don’t you think?
Is it possible, even though you said it will break the table, to send me the code to test the align middle [as you mentioned at the start of this thread] to see if I can do a work around to get table cells to align in the middle to keep everything nicely balanced on the screen? I would like to try anyway :)
Cheers…
Kevin.Hi Ismael,
So I tried the code you sent and applied it to all cells with the relevant adjustments for the different padding and it worked a treat – and it held together with a couple of different screen sizes – so all good. Not a quick solution but it does work well :) :)
Thanks my friend :)
Kevin.
- The topic ‘Align Middle on Tables in Enfold’ is closed to new replies.