jquery - 居中 JQuery 无法正常工作

Question

我在 Jquery 上有一个函数，它以包含文本的 div 为中心，它看起来像这样:

function center_paragraph(){
    var w=$("#paragrah").width();
    var finalw=w/2;
    alert(w+"/2="+finalw); //Test
    $("#paragraph").css({
        'left':'50%',
        'margin-left':-finalw
    });
}

我的问题是方法 width 返回一个错误的值，比如 1000 而 div 大约是 600。我使用这个方法是因为 div 位于绝对位置。

div CSS:

 #paragraph{
    font-family:'Arial';
    font-size:4em;
    color:white;
    font-weight:bold;
    position:absolute;
    display:none;
    border:solid 1px white;

}

我没有在 CSS 文件中这样做，因为每个屏幕都可以显示另一种尺寸的文本，所以我认为这是计算中心的正确方法。

Answer 1

你真的应该为此使用 CSS。对此有一个理想的属性

p {
    text-align: center
}

但如果你坚持使用 JS/jQuery 来做，这里是方法

var button = document.getElementById("my-button");
var par = document.getElementById("paragraph");
    
button.addEventListener("click", function() {
    par.style.textAlign = "center";
});

<p id="paragraph">
  This is a paragraph
</p>

<button id="my-button">
  Center Paragraph
</button>

jQuery 解决方案

$("button").on("click", function() {
  $("p").css({ "text-align": "center" });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="par">
  This is a paragraph
</p>

<button id="my-button">
  Center Paragraph
</button>

这样可以省去计算宽度的麻烦