需要帮助中心div块

时间：2015-06-05 21:43:27

标签： jquery html css

所以我的网站上有3张购买卡。现在所有的都放在左边，如果你选择了文本，然后按格式，它会到达左侧，但我希望卡片位于屏幕中间。这是一张图片：

enter image description here 

 <div class="col-md-3 col-sm-6">
  <div class="panel panel-default">
    <header class="panel-heading">
      <h3>Followers</h3>
      <div class="the-price">$10 <span class="subscript">/ month</span></div>
    </header>
    <div class="panel-body">
      <table class="table">
        <tbody>
        <tr><td>1 Account</td></tr>
        <tr class="active"><td>3 Project</td></tr>
        <tr><td>100K API Access</td></tr>
        <tr class="active"><td>100MB Storage</td></tr>
        <tr><td>Custom Cloud Services</td></tr>
        <tr class="active"><td>Weekly Reports</td></tr>
        </tbody>
      </table>
    </div>
    <footer class="panel-footer"><a href="#" class="btn btn-block btn-lg btn-default">Sign up now</a></footer>
  </div>
</div>
<div class="col-md-3 col-sm-6">
  <div class="panel panel-primary">
    <header class="panel-heading">
      <h3>Likes</h3>
      <div class="the-price">$20 <span class="subscript">/ month</span></div>
    </header>
    <div class="panel-body">
      <table class="table">
        <tbody>
        <tr><td>2 Account</td></tr>
        <tr class="active"><td>5 Project</td></tr>
        <tr><td>100K API Access</td></tr>
        <tr class="active"><td>200MB Storage</td></tr>
        <tr><td>Custom Cloud Services</td></tr>
        <tr class="active"><td>Weekly Reports</td></tr>
        </tbody>
      </table>
    </div>
    <footer class="panel-footer"><a href="#" class="btn btn-block btn-lg btn-primary">Sign up now</a></footer>
  </div>
</div>
<div class="col-md-3 col-sm-6">
  <div class="panel panel-default">
    <header class="panel-heading">
      <h3>Comments</h3>
      <div class="the-price">$35 <span class="subscript">/ month</span></div>
    </header>
    <div class="panel-body">
      <table class="table">
        <tbody>
        <tr><td>5 Account</td></tr>
        <tr class="active"><td>20 Project</td></tr>
        <tr><td>300K API Access</td></tr>
        <tr class="active"><td>500MB Storage</td></tr>
        <tr><td>Custom Cloud Services</td></tr>
        <tr class="active"><td>Weekly Reports</td></tr>
        </tbody>
      </table>
    </div>
    <footer class="panel-footer"><a href="#" class="btn btn-block btn-lg btn-default">Sign up now</a></footer>
  </div>
</div>
</div>
</div>
</div>
</div>
</section>

有关如何将其置于中心的任何建议？ 我试图在课后将“中心添加到代码的最顶层”但是所有这一切都使得购买卡的大小与整个页面的大小相同。

2 个答案:

答案 0 :(得分：0)

我自己不是一个自助用户，但这就是诀窍。引导网格基于12列的基础，所以当你指定“col-md-3”时实际上是3/12或25％而不是“col-md-4”这是33％“。诀窍是我们不想要的该行为全宽，所以我添加了一个名为medium-row的类，其最大宽度为960px，并且有一些自动边距。

HTML 

<div class="container">
  <div class="row medium-row">
    <div class="col-sm-6 col-md-4">...</div>
    <div class="col-sm-6 col-md-4">...</div>
    <div class="col-sm-6 col-md-4">...</div>
  </div>
</div>

CSS 

.medium-row {
  max-width: 960px;
  margin: 0 auto;
}

要看到这个有效的代码工作http://codepen.io/anon/pen/pJPydY

答案 1 :(得分：-1)

我的两分钱，没有任何中心就像桌面标签。它非常不受欢迎，但它往往在紧要关头工作得最好。试试吧：

＆＃13;
＆＃13; 
td {
    text-align: center;
}
＆＃13; 
<table align="center" cellspacing="10">
    <tr>
        <td class="panel panel-default">
            <header class="panel-heading">
                 <h3>Followers</h3>

                <div class="the-price">$10 <span class="subscript">/ month</span>
                </div>
            </header>
            <div class="panel-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <td>1 Account</td>
                        </tr>
                        <tr class="active">
                            <td>3 Project</td>
                        </tr>
                        <tr>
                            <td>100K API Access</td>
                        </tr>
                        <tr class="active">
                            <td>100MB Storage</td>
                        </tr>
                        <tr>
                            <td>Custom Cloud Services</td>
                        </tr>
                        <tr class="active">
                            <td>Weekly Reports</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <footer class="panel-footer"><a href="#" class="btn btn-block btn-lg btn-default">Sign up now</a>
            </footer>
        </td>
        <td class="panel panel-primary">
            <header class="panel-heading">
                 <h3>Likes</h3>

                <div class="the-price">$20 <span class="subscript">/ month</span>
                </div>
            </header>
            <div class="panel-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <td>2 Account</td>
                        </tr>
                        <tr class="active">
                            <td>5 Project</td>
                        </tr>
                        <tr>
                            <td>100K API Access</td>
                        </tr>
                        <tr class="active">
                            <td>200MB Storage</td>
                        </tr>
                        <tr>
                            <td>Custom Cloud Services</td>
                        </tr>
                        <tr class="active">
                            <td>Weekly Reports</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <footer class="panel-footer"><a href="#" class="btn btn-block btn-lg btn-primary">Sign up now</a>
            </footer>
        </td>
        <td class="panel panel-default">
            <header class="panel-heading">
                 <h3>Comments</h3>

                <div class="the-price">$35 <span class="subscript">/ month</span>
                </div>
            </header>
            <div class="panel-body">
                <table class="table">
                    <tbody>
                        <tr>
                            <td>5 Account</td>
                        </tr>
                        <tr class="active">
                            <td>20 Project</td>
                        </tr>
                        <tr>
                            <td>300K API Access</td>
                        </tr>
                        <tr class="active">
                            <td>500MB Storage</td>
                        </tr>
                        <tr>
                            <td>Custom Cloud Services</td>
                        </tr>
                        <tr class="active">
                            <td>Weekly Reports</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <footer class="panel-footer"><a href="#" class="btn btn-block btn-lg btn-default">Sign up now</a>
            </footer>
        </td>
    </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题