如何以 HTML5 为中心？答案

【问题标题】：How to center on HTML5?如何以 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 的答案，但我想你是在问如何使用引导类来做到这一点。对吗？

标签： html center centering

【解决方案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。考虑到我不知道您的元素的宽度，需要更改。

【讨论】：