0

I have a five column pricing table that looks like this

the first three on top

and with the remaining two right below

but i want the bottom two to be centered like in the image i provided

I hope what i am trying to achieve is clear, could any one please assist.
My css is 

* {
box-sizing: border-box;
}

.columns {
float: left;
width: 33.3%;
padding: 8px;
}

While my html is

 <div class="container">

 <div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
</div>


i only added code for one of the column, because i didn't want my post to be filled with codes(however the codes are all the same for the remaining 4 columns)

1 Answers1

0

You can use display: flex; flex-wrap: wrap; justify-content: center; on the parent. That will allow the columns to wrap and be center aligned.

* {
box-sizing: border-box;
}

.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.columns {
width: 33.3%;
padding: 8px;
}
 <div class="container">

 <div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
</div>

You could also use inline-block with text-align: center. You might want to re-apply text-align: left on .columns, but per your screenshot, that wouldn't be necessary since the text there is center aligned, too.

* {
box-sizing: border-box;
}

.container {
text-align: center;
}

.columns {
display: inline-block;
padding: 8px;
width: 33.3%;
}
<div class="container">

 <div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div><div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div><div class="columns">
<ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns"><ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
<div class="columns"><ul class="price">
  <li class="header" style="background-color:#F67016" >One-Sided<br> Business Cards</li>
<li class="grey">₦7,499.00</li>
<li style="background-color:white;" >Order one sided business cards that simply represent your business in special ways.<br> 
    Order with our free templates, <br>upload your own designs or have a team design your business cards at a friendly fee.</li>

<li style="background-color:white; text-align: left"  > <strong style="color: teal">Material:</strong>  300 gsm matte card paper stock with 600 gsm options</li>

<li style="background-color:white; text-align: left"  ><strong style="color: teal">Finishing:</strong>  Matte Lamination with round corner options</li>

    <li style="background-color:white; text-align: left "  > <strong style="color: teal">Delivery: </strong> 3 - 5 working days for Lagos,<br> 5 - 7 working days for other cities</li>
<li>₦7,499.00</li>

<li class="grey"><a href="#" class="button">Order Now</a></li>
</ul>
</div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64