Question

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

正如您所看到的，文本内容的一部分是静态的（“我喜欢”），另一部分是动画中动态设置的。

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

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

由于

Answer 1

试试这个：没有职位： 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/

Answer 2

您可以使用 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正常工作。这是DEMO。

Answer 3

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

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


#fixedspan {
   float:left;
}

css3动画文本对齐中心

3 个答案: