1

So I'm using three different texts and the first class .item-1 seems to be positioned properly but the second one goes slightly lower and the third one is way off at the bottom. I used the "margin-top" to get it centered but I feel like this isn't the best practice.

What are some ways to get them centered no matter what? 

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Sarah Cha
  • 61
  • 7
  • 1
    Have you read this? https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally – A. Meshu Oct 04 '18 at 19:10

3 Answers3

2

You can use position:absolute on the p elements and use a vertical centering solution which involves using top:50% and transform:translateY(-50%). This means you don't have to add a unique margin-top to every p element.

I also added position:relative to the .divider3 element so the p tags are positioned relative to that container.

NOTE: I noticed in another answer you said you don't want to use position:absolute. You will have to use position:absolute to take the element out of the natural document flow. Otherwise using position:relative the p tags will stack on top of each other and you will be constantly battling with CSS to adjust their vertical positioning. The more p tags you add it will get progressively harder to compensate for their vertical positioning, because they will get pushed further and further down the page.

.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; }
    }
<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>
WizardCoder
  • 3,353
  • 9
  • 20
1

These all are paragraphs, so they're appearing just below the preceding one.

You can change their position to be absolute.

I don't know why margin-top isn't working, so I removed them.

The code in action is this:

.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>
letsintegreat
  • 3,328
  • 4
  • 18
  • 39
  • 1
    @Timggwp... Why not? – letsintegreat Oct 04 '18 at 19:19
  • Not a good structure for a whole website. Because you have only a small piece of it and it satisfies the question but if you put that code into whole page, you will have to modify position everytime when you add new elements. It will be a mess. – Void Spirit Oct 04 '18 at 19:22
  • @Timggwp... Do you have a better idea? – letsintegreat Oct 04 '18 at 19:25
  • 1
    If you add `position: relative` to `.divider3` to define it as the reference for those absolute positions, you can put anything you want above and below it... – Johannes Oct 04 '18 at 19:34
  • They don't seem to be vertically aligned and a horizontal scrollbar is being created. Good effort though. – WizardCoder Oct 04 '18 at 19:38
0
 .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;

}

.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; }
}
Sai Krishna Konidena
  • 31
  • 3