Question

因此，我使用了三种不同的文本，第一个类.item-1的位置似乎正确，但是第二个类的位置稍低，第三个类的底部很远。我使用“ margin-top”将其居中，但我觉得这不是最佳实践。

有什么方法可以使它们居中？

.divider3 {
        background-image: url("images/people.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b6b6b6;
        height: 300px;
        margin: 0 auto;
    }

    .divider3 p {
        color: #FFFFFF;
        font-size: 20px;
        text-align: center;
        line-height: 25px;
        letter-spacing: 1px;
        padding-top: 8%;
    }

    .item-1, .item-2, .item-3 {
        position: relative;
        display: inline-block;
        width: 50%;
        font-size: 6em;
        animation-duration: 20s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
}

    .item-1 {
	    animation-name: anim-1;
        margin-top: -1%;
    }

    .item-2 {
	    animation-name: anim-2;
        margin-top: -12%;
    }

    .item-3 {
	    animation-name: anim-3;
        margin-top: -13%;
    }

    @keyframes anim-1 {
        0%, 8.3% { left: -100%; opacity: 0; }
        8.3%,25% { left: 25%; opacity: 1; }
        33.33%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-2 {
        0%, 33.33% { left: -100%; opacity: 0; }
        41.63%, 58.29% { left: 25%; opacity: 1; }
        66.66%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-3 {
        0%, 66.66% { left: -100%; opacity: 0; }
        74.96%, 91.62% { left: 25%; opacity: 1; }
        100% { left: 110%; opacity: 0; }
    }

<div class="divider3">
        <p class="item-1">"Super fast service and clean environment!" <br /> - John Anderson, GA</p>
        <p class="item-2">"Plans have changed and I had to have a conference room within an hour and ThanksOffice was perfect for it!" <br /> - Ashley Green, CA</p>
        <p class="item-3">"Very professional and satisfies every need." <br /> - Sam Smith, NJ</p>
    </div>

Answer 1

您可以在position:absolute元素上使用p，并使用涉及使用top:50%和transform:translateY(-50%)的垂直居中解决方案。这意味着您不必为每个margin-top元素添加唯一的p。

我还向position:relative元素添加了.divider3，因此p标签相对于该容器定位。

注意：我在另一个答案中注意到您说您不想使用position:absolute。您将必须使用position:absolute将元素从自然文档流中删除。否则，使用position:relative的{{1}}标签会彼此堆叠，并且您将不断地与CSS竞争以调整其垂直位置。您添加的更多p标签将越来越难以补偿其垂直位置，因为它们将被推到页面的下方。

.divider3 {
        background-image: url("images/people.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b6b6b6;
        height: 300px;
        margin: 0 auto;
        position:relative;
        overflow:hidden;
    }

    .divider3 p {
        color: #FFFFFF;
        font-size: 20px;
        text-align: center;
        line-height: 25px;
        letter-spacing: 1px;
        top:50%;
        transform:translateY(-50%);
        margin:0;
    }

    .item-1, .item-2, .item-3 {
        position: absolute;
        display: inline-block;
        width: 50%;
        font-size: 6em;     
        animation-duration: 20s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
}

    .item-1 {
	    animation-name: anim-1;
    }

    .item-2 {
	    animation-name: anim-2;
    }

    .item-3 {
	    animation-name: anim-3;
    }

    @keyframes anim-1 {
        0%, 8.3% { left: -100%; opacity: 0; }
        8.3%,25% { left: 25%; opacity: 1; }
        33.33%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-2 {
        0%, 33.33% { left: -100%; opacity: 0; }
        41.63%, 58.29% { left: 25%; opacity: 1; }
        66.66%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-3 {
        0%, 66.66% { left: -100%; opacity: 0; }
        74.96%, 91.62% { left: 25%; opacity: 1; }
        100% { left: 110%; opacity: 0; }
    }

Answer 2

这些都是段落，因此它们出现在前一个段落的下方。

您可以将其position更改为absolute。

我不知道为什么margin-top不起作用，所以我将它们删除了。

正在执行的代码是这样的：

.divider3 {
        background-image: url("images/people.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b6b6b6;
        height: 300px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .divider3 p {
        color: #FFFFFF;
        font-size: 20px;
        text-align: center;
        line-height: 25px;
        letter-spacing: 1px;
        padding-top: 8%;
    }

    .item-1, .item-2, .item-3 {
        position: absolute;
        display: inline-block;
        width: 50%;
        font-size: 6em;
        animation-duration: 20s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
}

    .item-1 {
	    animation-name: anim-1;
    }

    .item-2 {
	    animation-name: anim-2;
    }

    .item-3 {
	    animation-name: anim-3;
    }

    @keyframes anim-1 {
        0%, 8.3% { left: -100%; opacity: 0; }
        8.3%,25% { left: 25%; opacity: 1; }
        33.33%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-2 {
        0%, 33.33% { left: -100%; opacity: 0; }
        41.63%, 58.29% { left: 25%; opacity: 1; }
        66.66%, 100% { left: 110%; opacity: 0; }
    }

    @keyframes anim-3 {
        0%, 66.66% { left: -100%; opacity: 0; }
        74.96%, 91.62% { left: 25%; opacity: 1; }
        100% { left: 110%; opacity: 0; }
    }

<div class="divider3">
        <p class="item-1">"Super fast service and clean environment!" <br /> - John Anderson, GA</p>
        <p class="item-2">"Plans have changed and I had to have a conference room within an hour and ThanksOffice was perfect for it!" <br /> - Ashley Green, CA</p>
        <p class="item-3">"Very professional and satisfies every need." <br /> - Sam Smith, NJ</p>
    </div>

Answer 3

then

}

 .divider3 {
        background-image: url("images/people.png");
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #b6b6b6;
        height: 300px;
        margin: 0 auto;
    }

.divider3 p {
    color: #FFFFFF;
    font-size: 20px;
    text-align: center;
    line-height: 25px;
    letter-spacing: 1px;
    padding-top: 8%;
    position: absolute;
    top: 5em;
}

.item-1, .item-2, .item-3 {
    position: relative;
    display: inline-block;
    width: 50%;
    font-size: 6em;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;

我似乎无法使文字居中

3 个答案: