css3动画文本居中对齐

css3 animation text align center

本文关键字：对齐 文本 动画 css3      更新时间：2024-06-27

我在自定义文本上有一个css3动画。这是一把小提琴：http://jsfiddle.net/pwLxo78k/

正如您所看到的，文本内容的一部分是静态的（"I love"），另一部分是在动画中动态设置的。

我只想保持文本居中，但我也希望静态文本（"我爱"）保持在相同的位置，无论动态文本的长度如何。

是否可以在我的div上保留text-align: center属性？

感谢

您可以将tables用于以下内容：

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

使用：

#fixedspan {
    text-align: right;
}
#movingspan {
    text-align: left;
}

用于css。并使用div而不是span使text-align工作。这是演示。

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

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

#fixedspan {
   float:left;
}

试试这个：无位置：CSS：

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

演示：http://jsfiddle.net/pwLxo78k/9/

带定位。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;
}

演示：http://jsfiddle.net/pwLxo78k/6/

相关文章：