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
    });
}

我的问题是方法宽度返回一个错误值，类似于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>

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

集中JQuery无法正常工作

1 个答案: