Trying to center pricing table in page - html

Question

for some reason I am having one heck of a time trying to figure out how to center this silly pricing table in my page using css. Each table has a width of 40%, I've already tried changing the left and right margin to auto using CSS but with no success.
Here is the HTML:
<div id="pricing-table" class="pricing-table">
<ul>
<li class="heading">Bronze</li>
<li class="price">£20</li>
<li>Starter package</li>
<li>15 Projects</li>
<li class="action">Buy Now</li>
</ul>
<ul class="feature">
<li class="heading">Silver</li>
<li class="price">£60</li>
<li>Intermediate package</li>
<li>20 Projects</li>
<li class="action">Buy Now</li>
</ul>
</div>
Here is the CSS:
.pricing-table ul{
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin: 2px;
width: 40%;
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}
.pricing-table ul:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 3px 5px 7px rgba(0,0,0,.7);
}
.pricing-table ul li{
padding: 10px;
background-color: #FFFFFF;
border-width: 0px;
border-style: dotted;
border-color: #CCCCCC;
border-radius: 4px;
border-bottom-width: 1px;
font-size: 15px;
}
.pricing-table li:first-child{
border-bottom: 0;
}
.pricing-table li:last-child{
border-bottom: 0;
}
.pricing-table li:nth-child(odd){
background-color: #FFFFFF;
}
.pricing-table ul .heading{
color: #FFFFFF;
background-color: #5091B2;
font-size: 30px;
}
.pricing-table ul .price{
color: #636363;
background-color: #FFFFFF;
font-size: 25px;
}
.pricing-table ul .action{
font-size: 20px;
background-color: #ffffff;
color: #6C9694;
}
.pricing-table .action a{
border-color: #CCCCCC;
border-width: 1px;
border-radius: 4px;
background-color: #E9F7FE;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 100px;
padding-right: 100px;
border-style: solid;
color: #5091B2;
}
I'd like to thank everyone in advance for any help you may provide.
And here's a fiddle for what I have so far.

Answer 1

The <ul> elements are floated to left. In order to align the items horizontally, you could set a proper width on .pricing-table then use margin: 0 auto;
Mind the margins. you have to include the margin of <ul> elements for calculating the width of the .pricing-table element.
However, to get rid of specifying an explicit width for .pricing-table, you could change the display type of the ul elements to inline-block and align the inline elements by using text-align: center; for their parent as follows:
.pricing-table {
text-align: center; /* <-- align the inline(-block) elements horizontally */
}
.pricing-table ul {
display: inline-block; /* <-- display the ul elements as inline-block */
vertical-align: top; /* <-- keep the inline(-block) elements at the top */
/* other styles here... */
}
Working Demo.
There's also a white space between inline-block elements, you might want to consider removing that.
You can also remove the margins from <ul> elements, instead of removing the white space between them.
Updated Demo
Your choice :)

Answer 2

Try to do this:
.pricing-table{
width: 80%;
margin: auto;
}
Or any width you want.
Fiddle Demo

Answer 3

If you can define width in body, then do in CSS as :
body {
width :900px;
margin:auto;
}

Answer 4

Have you tried this? fiddle here
#pricing-table{
width:80%;
margin: auto;
}

Answer 5

Maybe you should add this to your CSS:
body{
text-align:center;
margin:0 auto;
padding:0 auto;
}
.pricing-table {
text-align:center;
margin:0 auto;
padding:0 auto;
width:40%;
}
.pricing-table ul{
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin: 2px;
width: 100%; //40% is now 100%
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}

Answer 6

Try including this; a fiddle
.pricing-table{
disply:block;
margin-right: auto;
margin-left:auto;
border:1px solid black; //just extra
width:80%; //need to define width to be able to center
}

Answer 7

Try the following CSS if you want them in the middle of the whole screen (centered), with some spacing between the two <ul> elements. Just added a body declaration and changed the margin in .price-table ul, just something different.
body {
width:900px;
margin:auto;
padding-top:150px
}
.pricing-table ul {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin:30px;
width: 40%;
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}
.pricing-table ul:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 3px 5px 7px rgba(0,0,0,.7);
}
.pricing-table ul li {
padding: 10px;
background-color: #FFFFFF;
border-width: 0px;
border-style: dotted;
border-color: #CCCCCC;
border-radius: 4px;
border-bottom-width: 1px;
font-size: 15px;
}
.pricing-table li:first-child{
border-bottom: 0;
}
.pricing-table li:last-child{
border-bottom: 0;
}
.pricing-table li:nth-child(odd) {
background-color: #FFFFFF;
}
.pricing-table ul .heading {
color: #FFFFFF;
background-color: #5091B2;
font-size: 30px;
}
.pricing-table ul .price {
color: #636363;
background-color: #FFFFFF;
font-size: 25px;
}
.pricing-table ul .action {
font-size: 20px;
background-color: #ffffff;
color: #6C9694;
}
.pricing-table .action a {
border-color: #CCCCCC;
border-width: 1px;
border-radius: 4px;
background-color: #E9F7FE;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 100px;
padding-right: 100px;
border-style: solid;
color: #5091B2;
}