Menu icon Foundation
Center <UL> Pricing Table

<ul class="pricing-table">
  <li class="title">Standard</li>
  <li class="price">$499</li>
  <li class="description">$19.99/month</li>
  <li class="bullet-item">Up to 5 pages</li>
  <li class="bullet-item">Click to Call</li>
  <li class="bullet-item">Mobile Maps</li>
  <li class="bullet-item">Poto Gallery</li>
  <li class="bullet-item">Email Contact Form</li>
  <li class="bullet-item">Social Networking</li>
  <li class="bullet-item">Youtube Video integration</li>
  <li class="bullet-item">Restraunt Menu</li>
  <li class="bullet-item">Yelp Reviews</li>
  <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
</ul>
            

         

ul.pricing-table{
    width:20%;
	height:auto;
	float:left;
	display:inline-block;
    margin-right:20px;
	
}
            

         

I'm trying to center 3 pricing tables in the middle of a full-width page using 12 columns.

Anybody know what I'm doing wrong?

Thanks

ul

<ul class="pricing-table">
  <li class="title">Standard</li>
  <li class="price">$499</li>
  <li class="description">$19.99/month</li>
  <li class="bullet-item">Up to 5 pages</li>
  <li class="bullet-item">Click to Call</li>
  <li class="bullet-item">Mobile Maps</li>
  <li class="bullet-item">Poto Gallery</li>
  <li class="bullet-item">Email Contact Form</li>
  <li class="bullet-item">Social Networking</li>
  <li class="bullet-item">Youtube Video integration</li>
  <li class="bullet-item">Restraunt Menu</li>
  <li class="bullet-item">Yelp Reviews</li>
  <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
</ul>
            

         

ul.pricing-table{
    width:20%;
	height:auto;
	float:left;
	display:inline-block;
    margin-right:20px;
	
}
            

         

I'm trying to center 3 pricing tables in the middle of a full-width page using 12 columns.

Anybody know what I'm doing wrong?

Thanks


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Brandon!

Wouldn't it be better to place the pricing tables each in individual divs? This would save a lot of CSS.

Check out this CodePen: http://codepen.io/winghouchan/pen/GlBrn/

Ignore the CSS and JS there. You just want the HTML.

Brandon B over 5 years ago

Before anyone mentions or asks, I did already try

margin-right:auto;
    margin-left:auto;
}

but it didn't work.

Wing-Hou Chan over 5 years ago

Hey Brandon!

Wouldn't it be better to place the pricing tables each in individual divs? This would save a lot of CSS.

Check out this CodePen: http://codepen.io/winghouchan/pen/GlBrn/

Ignore the CSS and JS there. You just want the HTML.

Brandon B over 5 years ago

Thank you Wing-Hou! Worked out great