Question

如何对齐列以使它们位于页面中心？列对齐左边但我需要它们在页面中间居中使用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;
}

Answer 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>

如何对齐页面中心的列？

1 个答案: