Question

基本上我要做的就是根据宽度将所有左对齐文本居中，然后获取每个文本的宽度，然后使左边距为负宽度的一半，但现在它只适用于第一段。

我尝试使用inline-block，以便宽度对文本准确，而不是父级的继承宽度？我仍然希望块元素的行为类似于块元素。

如何在页面加载时将其应用于所有文本？

此外，我希望这适用于网页上的所有文字（p，li，pre，blockquote）是否有更好的方法这个？我可以在功能中列出我猜的所有内容。

<html>
<head>
<title>center left aligned text using javascript/jquery</title>
<style type="text/css" media="screen">

* {
    margin: 0;
    padding: 0;
}

#container {
    margin: 200px auto;
    width: 1280px;
    height: 800px;
    border: #000 1px solid;
}

#container p {
    background: #eee;
    display: inline-block;
    left: 50%;
    max-width: 500px;
    position: relative;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function () {

    $(function() {
        var width = $("p").width();
        $('p').css('margin-left', -width / 2);
    });

}); 

</script>
</head>
<body>
<div id="container">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

编辑：如果我在每个之后插入一个块元素，它的行为正确

$("p").each(function () {
    var width = $(this).width();
    $(this).after('<br />');
    $(this).css('margin-left', -width / 2);
});

Answer 1

您需要.each()循环来查找宽度并将边距分别应用于每个段落：

$("p").each(function () {
    var width = $(this).width();
    $(this).css('margin-left', -width / 2);
});

http://jsfiddle.net/mblase75/Cg45A/

也就是说，只要您将inline-block应用于段落，我认为它们看起来不像您希望的那样。你的终端设计到底应该是什么样的？

Answer 2

我认为除非你在标记中添加更多格式/元素，否则它将尽可能接近：

http://jsfiddle.net/sanpopo/rQG8c/

$(document).ready(function () {
   $('p').each(function() {
      var width = $(this).width();   
       alert(width);
       $(this).css({'margin-left': -width / 2, 'text-align': 'center'}).after('<br /><br />');    
   });
});

使用javascript / jquery中心左对齐文本

2 个答案: