Trying to center pricing table in page

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"><a href="">Buy Now</a></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"><a href="">Buy Now</a></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.

try to give a width to the pricing-table and use `margin:0 auto;` — Atal Shrivastava, Feb 27 '14 at 08:39

score 4 · Accepted Answer · edited May 23 '17 at 11:58

4

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 :)

edited May 23 '17 at 11:58

Community

1
1

answered Feb 27 '14 at 08:42

Hashem Qolami

97,268
26
150
164

nice..i need this too +1 yo – rockStar Feb 27 '14 at 08:48
1

Ahh this one did the trick! TYVM Hashem. Now to beg the noob question... why is it such a process to do something so simple? =p At first I thought all I would have to do is center align the div, boy was I wrong... =p – Aib Syed Feb 27 '14 at 08:57
@user3357677 You are welcome. I should note that using `float` removes the elements from document *normal* flow and float them inside their parent while the parent itself in a block-level element and fills the entire horizontal space. Hence, `auto` for left/right margins is calculated to `0` unless you specify an explicit width for the parent. – Hashem Qolami Feb 27 '14 at 09:06
@user3357677 Since you are new to Stackoverflow, If you feel an answer solved the problem, please mark it as *accepted* by clicking the check mark. This helps keep the focus on older SO which still don't have answers. – Hashem Qolami Feb 27 '14 at 09:10
1

Ah thank you for clearing that up Hashem, makes sense! I actually am new, and have this marked as accepted now. Thanks again! – Aib Syed Feb 27 '14 at 09:26
@user3357677 Don't mention it :) – Hashem Qolami Feb 27 '14 at 09:30

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

Try to do this:

.pricing-table{
    width: 80%; 
    margin: auto;
}

Or any width you want.

Fiddle Demo

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 27 '14 at 08:40

Roadirsh

571
5
23

+1: Also my answer, but you posted first so i just added a fiddle. – Adrian Enriquez Feb 27 '14 at 08:44

score 1 · Answer 3 · answered Feb 27 '14 at 08:43

1

If you can define width in body, then do in CSS as :

 body { 
    width :900px; 
    margin:auto;

}

answered Feb 27 '14 at 08:43

Sushil Kandola

870
2
9
22

rockStar · Answer 4 · 2014-02-27T08:49:46.373

0

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
}

edited Feb 27 '14 at 08:49

answered Feb 27 '14 at 08:41

rockStar

1,296
12
22

yup, thats why i include the comment that he can define it, its just for the sample snippet :) – rockStar Feb 27 '14 at 08:42
I mean defining it in % is better. – Rahul Desai Feb 27 '14 at 08:43

score 0 · Answer 5 · answered Feb 27 '14 at 08:44

0

Have you tried this? fiddle here

#pricing-table{
     width:80%;
     margin: auto;
}

answered Feb 27 '14 at 08:44

Carls Jr.

3,088
7
37
57

Wow thanks you so much for the quick replys everyone! When adding the width, will I have to delete the original width of 40% specified within .pricing-table ul{ }? – Aib Syed Feb 27 '14 at 08:48
1

@Hashem Qolami had a nice answer, check it out :) – Carls Jr. Feb 27 '14 at 08:53
Thanks Carls Jr. He had a great solution =] – Aib Syed Feb 27 '14 at 08:57

score 0 · Answer 6 · answered Feb 27 '14 at 08:49

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; 
}

score 0 · Answer 7 · edited Mar 22 '14 at 00:42

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; 
}

Trying to center pricing table in page

7 Answers7

Fiddle Demo