How to center on HTML5?

Question

On my website, I was previously displaying 4 plan cards. I'm looking on displaying only 3 cards, so I commented one of them. As result, they are not centered. How can I center them?

Here's how it's being currently displayed:

Here's the code:

<!-- Row fuid-->
<div class="row">
  <!-- Item table -->
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="item_table">
      <div class="head_table">
        <h1>FREE</h1>
        <h2>£ 0.00 <span>/ Mo</span></h2>
      </div>
      <ul>
        <li class="color">2 GB HDD</li>
        <li>25GB Bandwidth</li>
        <li class="color">1 E-mail Account</li>
        <li>1 Sub Domains</li>
        <li class="color">cPanel/Site Creator</li>
        <li>1 FTP Account</li>
        <li class="color">1 Cron Job</li>
        <li>1 Addon Domain</li>
        <li class="color">1 Parked Domain</li>
      </ul>
      <a href="signup.html" class="button">Order Now</a>
    </div>
  </div>
  <!-- End Item table -->

  <!-- Item table -->
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="item_table">
      <div class="head_table">
        <h1>PREMIUM</h1>
        <h2>£ 0.99 <span>/ Mo</span></h2>
      </div>
      <ul>
        <li class="color">30 GB HDD</li>
        <li>1000GB Bandwidth</li>
        <li class="color">1024MB RAM</li>
        <li>2 Dedicated IP Addresses</li>
        <li class="color">cPanel/WHM Included</li>
        <li>Open VZ Included</li>
      </ul>
      <a href="signup.html" class="button">Order Now</a>
    </div>
  </div>
  <!-- End Item table -->

  <!-- Item table -->
  <!--<div class="col-sm-6 col-md-4 col-lg-3">
        <div class="item_table">
            <div class="head_table">
                <h1>V.I.P</h1>
                <h2>£ 2.00  <span>/ Mo</span></h2>
                <!--<h5>Or  $ 150.5 Yearly!</h5>
            </div>
            <ul>  
                <li class="color">30 GB HDD</li>
                <li>1000GB Bandwidth</li>
                <li class="color">1024MB RAM</li>
                <li>2 Dedicated IP Addresses</li>
                <li class="color">cPanel/WHM Included</li>
                <li>Open VZ Included</li>
            </ul> 
            <a href="www.clearhostsolutions.com/signup.html" class="button">Order Now</a>
        </div>
    </div>-->
  <!-- End Item table -->

Answer 1

You can still use <div align="center">stuff here</div> and it will work fine just if you want the containing items to not center content on them say <tag style="text-align:left;">...</tag>

Another way is to inside your CSS file have the following code:

* { margin:0px auto; }
div.container { width:1000px; border:1px solid black; }

The * applies to the entire page and sets up the page to be centered. You then need some other tag like div with a set width to take advantage of the property.

In your HTML file:

<div class="container">...</div>

Answer 2

I think there's two answers...

CSS has text-align: center and with Bootstrap's 12 column layout, you need to give each column 4 each I used the col-sm-4 since JSFiddle's window is small.

Here's my example: http://jsfiddle.net/N7mvN/ make sure to pull the display window open wider to see it

Here's the HTML:

<!-- Row fuid-->
    <div>
        <div class="row" style="margin:0 auto">
            <!-- Item table -->
            <div class="col-sm-4">
                <div class="item_table" style="background-color:red">
                    <div class="head_table">
                        <h1>FREE</h1>
                        <h2>£ 0.00  <span>/ Mo</span></h2>
                    </div>
                    <ul>  
                        <li class="color">2 GB HDD</li>
                        <li>25GB Bandwidth</li>
                        <li class="color">1 E-mail Account</li>
                        <li>1 Sub Domains</li>
                        <li class="color">cPanel/Site Creator</li>
                        <li>1 FTP Account</li>
                        <li class="color">1 Cron Job</li>
                        <li>1 Addon Domain</li>
                        <li class="color">1 Parked Domain</li>
                    </ul> 
                    <a href="signup.html" class="button">Order Now</a>
                </div>
            </div>
            <!-- End Item table -->

            <!-- Item table -->
            <div class="col-sm-4">
                <div class="item_table" style="background-color:green">
                    <div class="head_table">
                        <h1>PREMIUM</h1>
                        <h2>£ 0.99  <span>/ Mo</span></h2>
                    </div>
                    <ul>  
                        <li class="color">30 GB HDD</li>
                        <li>1000GB Bandwidth</li>
                        <li class="color">1024MB RAM</li>
                        <li>2 Dedicated IP Addresses</li>
                        <li class="color">cPanel/WHM Included</li>
                        <li>Open VZ Included</li>
                    </ul> 
                    <a href="signup.html" class="button">Order Now</a>
                </div>
            </div>
            <!-- End Item table -->

            <!-- Item table -->
            <div class="col-sm-4">
                <div class="item_table" style="background-color:blue">
                    <div class="head_table">
                        <h1>V.I.P</h1>
                        <h2>£ 2.00  <span>/ Mo</span></h2>
                        <h5>Or  $ 150.5 Yearly!</h5>
                    </div>
                    <ul>  
                        <li class="color">30 GB HDD</li>
                        <li>1000GB Bandwidth</li>
                        <li class="color">1024MB RAM</li>
                        <li>2 Dedicated IP Addresses</li>
                        <li class="color">cPanel/WHM Included</li>
                        <li>Open VZ Included</li>
                    </ul> 
                    <a href="www.clearhostsolutions.com/signup.html" class="button">Order Now</a>
                </div>
            </div>
            <!-- End Item table -->
        </div>
    </div>

And some extra CSS:

.item_table {
    margin:1.5em;
    padding:1em;
    text-align:center;
}