Tagged: tables, vertical alignment
** RESOLVED **
I have spent the whole day trying to center the pricing rows in two tables. I scoured the support forums and tried every solution in every thread I could find. I finally implemented a custom class and got close…
.pfc-sp-table .avia-pricing-row {
text-align:center;
vertical-align: baseline;
color:red !important;
padding-top: 20px;
}
But as you can see the text in the pricing row is still not exactly centered: http://www.premierfloorcare.com/services/service-plans/
I tried everything I could think of and still can’t get it to work right. For some reason I can only manipulate certain styles in the CSS. I can for example change the background color and the text color. I cannot change the font size or the cell padding using this method. I’ve included an admin account if needed.
Hi,
I was able to solve the problem so you can close this. I was using h3 in the pricing row, which has a default 8px bottom margin (that’s what was causing the offset). I added 8px to the top margin and the problem was solved. But is this the best way to solve the problem, or is the solution sloppy? it works in any case…
/*
* Vertically centers pricing row text on the service plans tables
*/
.pfc-sp-table .avia-pricing-row, h3 {
text-align:center;
vertical-align: middle;
margin-top: 8px;
margin-bottom: 8px;
}
Hi!
Please change your code to following one not to effect other h3 elements
tr.avia-pricing-row h3, .pfc-sp-table .avia-pricing-row {
text-align:center;
vertical-align: middle;
margin-top: 8px;
margin-bottom: 8px;
}
Cheers!
Yigit
Good catch. I appreciate the code review. Changes made and all appears to work fine.
Thanks,
Frank