Certering pricing Tables

[RobG]

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/robgoss

[rfmeier]

Rob,

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.

---

Ryan Meier – Twitter

[RobG]

Hello 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/robgoss

[rfmeier]

Rob,

The text-align attribute will center more than just text. Removing the float and setting the display to inline-block is the key.

---

Ryan Meier – Twitter

[rfmeier]

Rob,

Here is a screenshot.

---

Ryan Meier – Twitter

[RobG]

Are 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/robgoss

[rfmeier]

Yes sir. In this case, floating causes more problems than it solves.

---

Ryan Meier – Twitter

[rfmeier]

Rob,

The stacking is due to display: block;. Set that to display: inline-block like I posted in the css above.

---

Ryan Meier – Twitter

[RobG]

Thanks 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/robgoss

[rfmeier]

You are very welcome and nice to meet you too, Rob! Good luck with the site.

---

Ryan Meier – Twitter

[Author]

Posts