如何对齐页面中心的列？ [复制]

Posted 2023-03-05

【中文标题】如何对齐页面中心的列？ [复制]

【英文标题】：How do I align columns in the center of the page? [duplicate]

【发布时间】：2016-06-20 12:07:03

【问题描述】：

如何对齐列以使它们位于页面中心？列向左对齐，但我需要它们位于页面中间我使用 CSS3、html5 和 bootstrap v3.3.4

<section id="about-us" class="about-us">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-sm-3">
                <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="900ms">
                    <h2>one</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-3">
                    <div class="block wow fadeInRight" data-wow-delay=".6s" data-wow-duration="900ms">
                        <h1>One</h1>
                        <h1>Two</h1>
                        <h1>Three</h1>
                        <h1>Four</h1>
                        <h1>Five</h1>
                        <h1>Six</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

.about-us 
    background-image:linear-gradient(rgba(18, 172, 234, 0.42),     rgba(0, 191, 255, 0.55)),url(background-about-header.png);
    background-size: cover;
    background-attachment: scroll;
    color: #fff;
    position: relative;
    background-position: center;
    overflow: hidden;
    height: 100vh;


#about-us h1 
    font-size: 400%;
    font-weight: 400;
    text-transform: none;
    color: #666;
    text-align: justify;
    margin: auto;



.about-us h2 
    font-size: 750%;
    font-weight: 400;
    text-transform: uppercase;
    color: #666;
    line-height: 80px;
    padding-top: 120px;
    margin: auto;


#about-us .block 
    position: relative;
    padding: 310px 0px 0px;
    text-align: center;
    margin: auto;

【参考方案1】：

你会想要使用 Twitter Bootstraps .col-md-offset-* 类。 Here 是文档。您需要在最左边的列上添加一个偏移量，然后将该 div 移动到您定义的列数上，例如，您的 html 将如下所示：

<section id="about-us" class="about-us">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3  col-md-offset-3 col-sm-3 col-sm-offset-3"> //see here we added the two offset classes 
                <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="900ms">
                    <h2>one</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-3">
                    <div class="block wow fadeInRight" data-wow-delay=".6s" data-wow-duration="900ms">
                        <h1>One</h1>
                        <h1>Two</h1>
                        <h1>Three</h1>
                        <h1>Four</h1>
                        <h1>Five</h1>
                        <h1>Six</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

【讨论】：

谢谢！！我试图弄清楚它，然后也看了看网格系统。不敢相信！非常感谢！