如何以 HTML5 为中心？
Posted
技术标签:
【中文标题】如何以 HTML5 为中心？【英文标题】：How to center on HTML5? 【发布时间】：2014-09-24 01:43:50 【问题描述】：在我的网站上，我之前展示了 4 张计划卡。我正在寻找只显示 3 张卡片，所以我评论了其中一张。结果，它们没有居中。我怎样才能使它们居中？
这是它当前的显示方式：
代码如下：
<!-- 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 -->【问题讨论】：
您的示例代码似乎不完整， 没有结束 div 人们正在给出 HTML5/CSS 的答案，但我想你是在问如何使用引导类来做到这一点。对吗？ 【参考方案1】：我认为有两个答案...
CSS 有 text-align: center 并且使用 Bootstrap 的 12 列布局，你需要给每列 4 列我使用 col-sm-4 因为 JSFiddle 的窗口很小。
这是我的例子： http://jsfiddle.net/N7mvN/ 确保将显示窗口拉得更大以查看它
这是 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>
还有一些额外的 CSS：
.item_table
margin:1.5em;
padding:1em;
text-align:center;
【讨论】：
您好，这很有效，快速提问我如何将它恢复到我的布局？即颜色？？ 在 html 中，我为列表项添加了一些样式。删除显示背景颜色的部分【参考方案2】：您仍然可以使用<div align="center">stuff here</div>，只要您希望包含的项目不以它们为中心，例如<tag style="text-align:left;">...</tag>，它就会正常工作。
另一种方法是在您的CSS 文件中包含以下代码：
* margin:0px auto;
div.container width:1000px; border:1px solid black;
* 应用于整个页面并将页面设置为居中。
然后，您需要一些其他标签，例如 div 并设置宽度以利用该属性。
在您的HTML 文件中：
<div class="container">...</div>
【讨论】：
【参考方案3】：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;
【讨论】：
【参考方案4】：将它们全部包装在一个 div 中，并将 style 属性设置为 margin: 0px auto; width: 1000px;，其中 1000px 是所包含元素的宽度。 IE。考虑到我不知道您的元素的宽度，需要更改。
【讨论】：
以上是关于如何以 HTML5 为中心？的主要内容，如果未能解决你的问题，请参考以下文章