使用javascript/jquery将文本居中左对齐_Javascript_Jquery_Css_Alignment

使用javascript/jquery将文本居中左对齐

javascript jquery css

使用javascript/jquery将文本居中左对齐,javascript,jquery,css,alignment,Javascript,Jquery,Css,Alignment,基本上，我想做的是根据宽度将所有左对齐的文本居中，得到每个文本的宽度，然后使左边距为宽度的负一半，但现在它只适用于第一段我尝试使用内联块，以便宽度精确到文本，而不是继承的父块宽度？我仍然希望块元素的行为像块元素一样当页面加载时，如何使其应用于所有文本另外，我希望这对页面上的所有文本都有效（p，li，pre，blockquote）有更好的方法吗？我可以列出函数中的所有内容 <html> <head> <title>center left aligned t

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

我尝试使用

内联块

，以便宽度精确到文本，而不是继承的父块宽度？我仍然希望块元素的行为像块元素一样

当页面加载时，如何使其应用于所有文本

另外，我希望这对页面上的所有文本都有效（

，

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>


使用javascript/jquery将文本居中左对齐
* {
保证金：0；
填充：0；
}
#容器{
利润率：200px自动；
宽度：1280px；
高度：800px；
边框：#000 1px实心；
}
#容器p{
背景：#eee；
显示：内联块；
左：50%；
最大宽度：500px；
位置：相对位置；
}
$（文档）.ready（函数（）{
$（函数（）{
变量宽度=$（“p”）.width（）；
$（'p'）.css（'margin-left'，-width/2）；
});
}); 
这是一位杰出的领袖，他是一位伟大的领袖
Lorem ipsum dolor sit amet，是一位杰出的领导者
Lorem ipsum dolor sit amet

编辑：如果在每个元素之后插入块元素，则其行为正确

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

$（“p”）。每个（函数（）{
var width=$（this.width（）；
$（this.after（“
”）；
$（this.css（'margin-left'，-width/2）；
});

您需要一个

.each（）

循环来查找宽度并将边距分别应用于每个段落：

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

也就是说，只要你把

内联块

应用到段落中，我认为它们不会像你希望的那样。您的最终设计应该是什么样的？

我认为这将是您能得到的最接近的结果，除非您在标记中添加更多的格式/元素：

$（文档）.ready（函数（）{
$（'p'）。每个（函数（）{
var width=$（this.width（）；
警报（宽度）；
$（this.css（{'margin-left'：-width/2，'text align'：'center'}）；
});
});

通过取出

内联块

，它似乎可以正常工作。提琴：我遗漏了什么吗？在你的提琴中，请注意段落的宽度不是文本的实际宽度，这正是我试图处理的内容哦，我明白了。你的问题第一次没有提到这一点。你在.each（）上击败了我，我真不敢相信人们回答这些问题的速度有多快！我打赌这就是他的意思：桑波波，你的段落宽度都一样。我希望文本的行为与正常情况一样，包括换行和所有-唯一的区别是，我希望它基于宽度居中。我编辑了这个问题，以包括一个示例，说明我希望文本的行为。它只是基于宽度居中的左对齐文本，但其行为仍与文本对齐：居中一样

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