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 に答える