我有两个项目似乎在代码中居中并在页面上单独显示，但对齐时它们不是

Question

我在页面底部附近有一个居中的按钮。此外，我有三个图像，我通过将每个图像设置为 col-lg-2，每个图像之间有 3 个空列。我不明白为什么这两个项目不能很好地排列，哪一个是偏离中心的。

https://codepen.io/colesam/full/OgamyB/

SCSS：

a {
    color: $blue;
    font-size: 1.4vw;
    font-weight: 500;
    line-height: 1.7vw;
    transition: all 0.2s;

    &:hover {
        color: $orange;
        font-size: 1.7vw;
        cursor: pointer;
        text-decoration: none;
    }

    &:focus {
        color: $blue;
        text-decoration: none;

        &:hover {
            color: $orange;
            cursor: pointer;
        }
    }
}

body {
    background: white;
    color: $black;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    text-shadow: $text-shadow-light;
}

h2 {
    font-size: 5vh;
    margin-top: 5vh;
}

p {
    font-size: 3vh;
    letter-spacing: 2px;
    margin-top: 3vh;
    text-shadow: none;
}

.btn-next {
    bottom: 0;
    padding-bottom: 5vh;
    position: absolute;
    text-align: center;
    transition: all 0.3s;

    a {
        font-size: 5vw;

        &:hover {
            font-size: 5.5vw;
        }
    }
}

.center-text {
    text-align: center;
}

.left-text {
    text-align: left;
}

.no-margin {
    margin: 0;
}

.right-text {
    text-align: right;
}

.title {
    padding-left: 4vw;

    h3 {
        font-size: 3vw;
        text-shadow: $text-shadow;
    }
}

#portfolio-page {
    min-height: 100vh;
    position: relative;
}

h4 {
    font-size: 2vw;
}

.active-item {
    box-shadow: $box-shadow-o;
        -moz-box-shadow: $box-shadow-o;
        -webkit-box-shadow: $box-shadow-o;
}

.btn-portfolio {
    padding-top: 20vh;
    text-align: center;
    transition: all 0.3s;

    a {
        font-size: 5vw;

        &:hover {
            font-size: 5.5vw;
        }
    }
}

#featured-content {
    background: rgba(0, 0, 0, 0.1);
    height: 65vh;
    margin-top: 2vh;
    padding: 3vh 0;
}

#featured-img img {
    box-shadow: $box-shadow-light;
        -moz-box-shadow: $box-shadow-light;
        -webkit-box-shadow: $box-shadow-light;
}

#primary-featured {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: 45.5vh;
    top: 10%;
}

#secondary-featured {
    margin-top: 3vh;
}

HTML（在 div.container 中）：

<div id="portfolio-page">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <h2 class="center-text">My Portfolio</h2>
            <hr>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12" id="featured-content">
            <div class="row no-margin">
                <div class="col-lg-1 btn-portfolio" id="left-button">
                    <a><i class="glyphicon glyphicon-chevron-left"></i></a>
                </div>
                <div class="col-lg-8 col-lg-offset-1" id="primary-featured">
                    <div class="row">
                        <div class="col-lg-5" id="featured-img">
                            <img src="includes/img/headers.jpg" alt="A cluster of header images." class="img-responsive">
                        </div>
                        <div class="col-lg-6 col-lg-offset-1" class="center-text">
                            <h4 id="featured-title">Placeholder</h4>
                            <hr>
                            <p id="featured-description">Placeholder text.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-1 col-lg-offset-1 btn-portfolio" id="right-button">
                    <a><i class="glyphicon glyphicon-chevron-right"></i></a>
                </div>
                <div class="col-lg-6 col-lg-offset-3" id="secondary-featured">
                    <div class="row">
                        <div class="col-lg-2" id="secondary-feature1">
                            <img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
                        </div>
                        <div class="col-lg-2 col-lg-offset-3" id="secondary-feature2">
                            <img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
                        </div>
                        <div class="col-lg-2 col-lg-offset-3" id="secondary-feature3">
                            <img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 btn-next">
            <a>
                <i class="glyphicon glyphicon-chevron-down"></i>
            </a>
        </div>
    </div>
</div>

Answer 1

编辑：您的问题在于 position: absolute on .btn-next。

对于绝对定位的元素

该属性指定左边距边缘之间的距离 元素及其包含块的左边缘。

你有margin-left：-15px，所以它与margin-left：-15px对齐到中心。

如何解决：

将此添加到 .btn-next：

right: 0;
left: 0;

...或者您可以从 .btn-next 中删除 position: absolute。

备选方案：

底部的“向下箭头”没有居中，因为它在 row 类中，并且该类的 margin-left: 15px 和 margin-right: 15px。

如果你给它margin: 0px，就可以了。

将 div class="row" 重命名为其他名称或给它另一个类，例如 div class="row down"。

例子：

<div class="down">
    <div class="col-lg-12 btn-next">
        <a>
            <i class="glyphicon glyphicon-chevron-down"></i>
        </a>
    </div>
</div>

或

<div class="row down">
    <div class="col-lg-12 btn-next">
        <a>
            <i class="glyphicon glyphicon-chevron-down"></i>
        </a>
    </div>
</div>

CSS（仅在使用第二个选项时）：

.row.down {
    margin: 0px;
}