0

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

我尝试使用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);
});
4

2 回答 2

1

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

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

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

也就是说，只要你inline-block申请了这些段落，我认为它们看起来不会像你想要的那样。你的最终设计到底应该是什么样子？

于 2013-05-30T18:09:22.077 回答
0

我认为这将尽可能接近，除非您向标记添加更多格式/元素：

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 />');    
   });
});
于 2013-05-30T20:19:31.217 回答