Community Forums › Forums › Archived Forums › Design Tips and Tricks › Certering pricing Tables
- This topic has 9 replies, 2 voices, and was last updated 9 years, 9 months ago by rfmeier.
-
AuthorPosts
-
June 6, 2014 at 1:55 pm #108371RobGMember
Hello everyone, I was hoping someone here could help me out with a small problem. I've added some pricing tables to my main page and for some reason I can't get them centered here's the site if you would like to take a look http://robgoss.com/
Thank in advanced for any help with this. RobG
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossJune 6, 2014 at 2:03 pm #108374rfmeierMemberRob,
Here is what I came up with;
/* style.css line ~2882 */ .pricing-table{ width: 300px; padding: 0; list-style: none; float: none; /* remove floats */ display: inline-block; /* set display to inline-block from inherit */ position: relative; vertical-align: top; /* set vertical align to top */ text-align: center; /* make sure text-align is set to center */ background: #fff; position: relative; border: solid 1px #f1f1f1; z-index: 9; margin-right: 10px; -o-transition: box-shadow .3s linear, opacity .3s linear; -moz-transition: box-shadow .3s linear, opacity .3s linear; -webkit-transition: box-shadow .3s linear, opacity .3s linear; transition: box-shadow .3s linear, opacity .3s linear; }
It may possibly help to set the parent .pricing-tables to
text-align: center;
, but I am not sure if it will really make a difference.
June 6, 2014 at 2:10 pm #108376RobGMemberHello Ryan, thanks so much for responding, It's not the text I need aligned it's the tables it self. I want them centered in the middle of the widget. I've tryed just about everything I know but no luck.
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossJune 6, 2014 at 2:20 pm #108378rfmeierMemberRob,
The text-align attribute will center more than just text. Removing the float and setting the display to inline-block is the key.
June 6, 2014 at 2:21 pm #108379rfmeierMemberJune 6, 2014 at 2:25 pm #108380RobGMemberAre you saying to add (None) were the float attribute is within the style code? Because that attribute is in a few places left and right.
I tyred removing it from the line you pointed out and it centered them but also stacked them as well.
Thanks so much
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossJune 6, 2014 at 2:27 pm #108382rfmeierMemberJune 6, 2014 at 2:31 pm #108385rfmeierMemberRob,
The stacking is due to
display: block;
. Set that todisplay: inline-block
like I posted in the css above.
June 6, 2014 at 2:35 pm #108386RobGMemberThanks so much Ryan I think you nailed it, Hey by the way nice to meet ya I'm RobG 🙂 big help Thank you so much...
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossJune 6, 2014 at 2:40 pm #108387rfmeierMember -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.