Html 如何以 HTML5 为中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25070318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center on HTML5?
提问by ClearHost
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?
所以我在这里有这个代码 这是我将在我的网站上提供的计划，但我已经注释掉了其中一个计划，现在我只想显示 3 个计划，那么我如何将所有 3 个计划居中，如您所见从图上看，左边还有更多吗？
![[IMG]http://i.imgur.com/2At3Y5I.png[/IMG]](/static/img/viewimg.png)
<!-- 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 -->
回答by Khaltazar
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>
您仍然可以使用，<div align="center">stuff here</div>并且只要您希望包含的项目不以它们为中心，它就会正常工作说<tag style="text-align:left;">...</tag>
Another way is to inside your CSSfile have the following code:
另一种方法是在您的CSS文件中包含以下代码：
* { 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 divwith a set width to take advantage of the property.
将*适用于整个页面，并设置为中心的页面。然后，您需要一些其他标签，例如div设置宽度以利用该属性。
In your HTMLfile:
在您的HTML文件中：
<div class="container">...</div>
回答by Zombiesplat
I think there's two answers...
我想有两个答案...
css has text-align: centerand 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.
css 有text-align: center和 bootstrap 的 12 列布局，你需要给每列 4 每个我使用 col-sm-4 因为 jsfiddle 的窗口很小。
here's my example. http://jsfiddle.net/N7mvN/make sure to pull the display window open wider to see it.
这是我的例子。http://jsfiddle.net/N7mvN/确保将显示窗口拉得更宽以查看它。
here's the html
这是 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
和一些额外的 css
.item_table {
margin:1.5em;
padding:1em;
text-align:center;
}
回答by ShaneQful
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.
将它们全部包装在一个 div 中，并将 style 属性设置为margin: 0px auto; width: 1000px;1000px 是所包含元素的宽度。IE。考虑到我不知道元素的宽度，需要更改。
回答by siabaJS
html:
html：
<div class="container">
<div class="third inline"><!-- content --></div>
<div class="third inline"><!-- content --></div>
<div class="third inline"><!-- content --></div>
</div>
css
css
.third{
width:30%;
margin:0;}
.inline{
display:inline-block;}
.container{
width:50%;/*whatever*/
margin:0 auto;}
