Question

我在页面底部附近有一个居中的按钮。另外，我有三个图像，我通过使每个图像成为col-lg-2，每个图像之间有3个空列来居中。我无法弄清楚为什么这两个项目排列不好，哪一个偏离中心。

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

编辑：你的问题是位置：绝对在.btn-next。

对于绝对定位的元素

此属性指定左边距之间的距离   元素和包含块的左边缘。

你有左边距：-15px，所以它与边距左对齐：-15px。

如何解决：

将此添加到.btn-next：

right: 0;
left: 0;

...或者你可以从.btn-next中删除position：absolute。

备选方案：

＆＃34;向下箭头＆＃34;在底部没有居中，因为它在行类中并且该类具有margin-left：15px和margin-right：15px。

如果你给它保证金：0px，它就没事了。

重命名div class =＆＃34; row＆＃34;对其他东西或给它另一个类如div class =＆＃34; row down＆＃34;。

示例：

<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;
}

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

1 个答案: