问题
So i have this code here Which is the plans i will be providing on my website, but i have commented out one of the plans and now im looking to just display 3 plans, so how would i center all 3 of them as you can see by the picture, there more to the left?
<!-- 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 -->
回答1:
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;
}
回答2:
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>
回答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.
回答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;}
来源：https://stackoverflow.com/questions/25070318/how-to-center-on-html5