Search code examples
htmlcsscentering

H1 not centring horizontally when span used within the H1 (just adding to right hand side)

I've looked through as many posts similar to this as I could but to no avail, I have an H1 that is centred by the parent "Hero" section and want to include a span within the H1 so all of the text is centred (including the span)

When the span is added it seems to starts from the right-hand side of the centred H1 instead of being included in the overall H1's centring, this means it is pushed off the page at smaller screen sizes and doesn't work responsively so well.

.hero {
    text-align: center;
  }

.fadeIn{
    display: inline;
    text-indent: 5px;
}
.fadeIn span{
    animation: fadeEffect 12.5s linear infinite 0s;
    -ms-animation: fadeEffect 12.5s linear infinite 0s;
    -webkit-animation: fadeEffect 12.5s linear infinite 0s;
    color: #7387a5;
    opacity: 0;
    /*overflow: hidden;*/
    position: absolute;
}
.fadeIn span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(0px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(0px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(0px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
<section class="hero" id="hero">
        <div class="container">
            <div class="header-and-subheader">
                    <!-- <h1>Measure your mental health</h1> -->
                    <h1>You measure your
                        <div class="fadeIn">
                            <span>fitness</span>
                            <span>sleep</span>
                            <span>weight</span>
                            <span>steps</span>
                            <span>calories</span>
                        </div>
                    </h1>
                    <h1 id="header-response"><em>...why not your mind?</em></h1>
     </div>
   </div>
</section>

Code snippet can also be found here: https://jsfiddle.net/347qmpnw/2/ any ideas?

Solution

  • Your added span is of absolute position. This means that it will not occupy any actual space.

    I do get that you did this to have the words overlap and give that nice fade effect but its the reason for your issue as well.

    You can "hack" your way around it if you know the mean width of the words and add it as a right margin to your H1 to forcefully push it to "center". In the words I see here you can add about 70px and it should look right.

    But my guess is that you want the whole heading moving in accordance to the appearing word. I cannot think of a plain HTML/CSS way to do this I am afraid you will need some JS to do this properly