javascript - Css 文本定位无法正常工作

Question

嗨，这是我的代码 JsFiddle .我的文本定位工作不正常。现在默认的文本对齐方式是正确的并且工作正常，但是当我更改为居中或向左时它没有正确定位我的代码中缺少什么？

#headline1Txt, #headline2Txt, #headline3Txt
{
  text-align:right;
    position: relative; 
    top:60px;
    left: -160px;
    width: 140px;

}

Answer 1

检查这个 fiddle 链接 here

脚本

function bannerAnimation(){
    //Jquery Animation
    $("#headline1Txt").animate({ left: "20" }, 700, function () {
        $("#headline1Txt").animate({ left: "0", right:"0" }, 350);
    });

    setTimeout(function () {
        $("#headline2Txt").animate({ left: "20" }, 700, function () {
            $("#headline3Txt").animate({ left: "20" }, 700, function () {
                $("#headline3Txt").animate({ left: "0", right:"0" }, 350);
            });
            $("#headline2Txt").animate({ left: "0", right:"0" }, 350);
        });
    }, 1000);
}

CSS

#headline1Txt, #headline2Txt, #headline3Txt
{
    text-align:center;
    position: relative; 
    top:60px;
    left: -160px;
    width: auto;
}