How to center on HTML5? - html

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>
Order Now
</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>
Order Now
</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>
Order Now
</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>
Order Now
</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>
Order Now
</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>
Order Now
</div>
</div>
<!-- End Item table -->
</div>
</div>
And some extra CSS:
.item_table {
margin:1.5em;
padding:1em;
text-align:center;
}

Answer 3

Wrap them all in a div with the style attribute set to margin: 0px auto; width: 1000px; where 1000px is the width of the contained elements. ie. will need to be changed considering I don't know the widths of your elements.

Answer 4

html:
<div class="container">
<div class="third inline"><!-- content --></div>
<div class="third inline"><!-- content --></div>
<div class="third inline"><!-- content --></div>
</div>
css
.third{
width:30%;
margin:0;}
.inline{
display:inline-block;}
.container{
width:50%;/*whatever*/
margin:0 auto;}