Menu icon Foundation
Creating a pricing table with a centered graphic

I am very new to Foundation.

I want to use an equalizer pricing table with a graphic.

When I put a graphic in as a line item it seems to always be left aligned. what's the best way to center the graphic?

  <div class="row" data-equalizer>
  <div class="large-6 columns">
    <ul class="pricing-table" data-equalizer-watch>
      <li class="title">Abstract Works</li>
      <li><a href="#" class="bullet-item"><img src="img/abstract-paintings120x120.jpg"></a></li>
      <li class="cta-button"><a class="button" href="#">See More</a></li>
    </ul>    
  </div>
  <div class="large-6 columns">
    <ul class="pricing-table" data-equalizer-watch>
      <li class="title">Digital Works</li>
      <li><a href="#"><img src="img/digital-work120x120.jpg"></a></li>
      <li class="cta-button"><a class="button" href="#">See More</a></li>
    </ul>    
  </div>
  </div>
            

         

pricing tablegraphiccentering

I am very new to Foundation.

I want to use an equalizer pricing table with a graphic.

When I put a graphic in as a line item it seems to always be left aligned. what's the best way to center the graphic?

  <div class="row" data-equalizer>
  <div class="large-6 columns">
    <ul class="pricing-table" data-equalizer-watch>
      <li class="title">Abstract Works</li>
      <li><a href="#" class="bullet-item"><img src="img/abstract-paintings120x120.jpg"></a></li>
      <li class="cta-button"><a class="button" href="#">See More</a></li>
    </ul>    
  </div>
  <div class="large-6 columns">
    <ul class="pricing-table" data-equalizer-watch>
      <li class="title">Digital Works</li>
      <li><a href="#"><img src="img/digital-work120x120.jpg"></a></li>
      <li class="cta-button"><a class="button" href="#">See More</a></li>
    </ul>    
  </div>
  </div>
            

         

Lyn gave the most helpful answer for this post
Lyn over 5 years ago

Hey there,

The class "bullet-item" needs to be on the li to center items inside it.
Here goes a fiddle : http://jsfiddle.net/ZAZGk/

Kind regards,

Lyn.

Lyn over 5 years ago

Hey there,

The class "bullet-item" needs to be on the li to center items inside it.
Here goes a fiddle : http://jsfiddle.net/ZAZGk/

Kind regards,

Lyn.

Mark Carter over 5 years ago

Thanks Lyn! Worked perfectly.