css3 animation text align center

Question

I have a css3 animation on a custom text. Here's a fiddle: http://jsfiddle.net/pwLxo78k/

As you can see, one part of the text's content is static ("I love") and the other part is set dynamically inside the animation.

I just want to keep my text centered, but I also want the static text ("I love") remains at the same position whatever the length of the dynamic text.

Is it possible with keeping the text-align: center property on my div ?

Thanks

Answer 1

Try this: Without position: CSS:

#divHeader {
    text-align: center;
    width: 100%;
}
#divHeader span {
    display:inline-block;
    width:49%;
}
#fixedspan {
    text-align:right;
}
#movingspan {
    text-align:left;
}

Demo: http://jsfiddle.net/pwLxo78k/9/

With positioning. CSS:

#divHeader {
    text-align: center;
    width: 100%;
    position:relative;
}
#fixedspan {
    position:absolute;
    left:40%;
    width:38px;
}
#movingspan {
    position:absolute;
    left:calc(40% + 38px); //adjust the position based on width of "I love"
    margin:0 2px;
}

Demo: http://jsfiddle.net/pwLxo78k/6/

Answer 2

You can use tables for something like this:

<table style="width: 100%">
    <tr style="width: 100%">
        <td style="width: 50%">
            <div id="fixedspan">I love</span>
        </td>
        <td>
            <div id="movingspan" class="moving">you</span>
        </td>
    </tr>
</table>

And use:

#fixedspan {
    text-align: right;
}

#movingspan {
    text-align: left;
}

for the css. And use div instead of span for the text-align to work. Here's the DEMO .

Answer 3

http://jsfiddle.net/pwLxo78k/8/

#divHeader {
text-align: center;
width:35%;
margin:0 auto;
}


#fixedspan {
   float:left;
}