Css文本定位无法正常工作

Question

嗨，这是我的代码JsFiddle。我的文本定位工作不正常。现在默认的text-align是正确的，它工作正常但是当我转到中心或左边时，它没有正确定位我的代码中缺少的东西？

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

}

Answer 1

您正在寻找的是： LINK

<强> CSS：

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

Answer 2

检查此小提琴链接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;
}