0

Basically what I'm trying to do is to center all of the left aligned text based on the width by getting the width of each then making the left margin negative half of whatever the width was but right now it's only applying to the first paragraph.

I tried using inline-block so that the width is accurate to the text and not the inherited width of the parent? I still want block elements to behave like block elements though.

How can I get this to apply to all of the text when the page loads?

Also, I want this to work for all of the text on a page (p, li, pre, blockquote) is there a better way of doing this? I could just list everything in the function I guess.

<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>

EDIT: If I insert a block element after each, it behaves correctly

$("p").each(function () {
    var width = $(this).width();
    $(this).after('<br />');
    $(this).css('margin-left', -width / 2);
});
Improve this question
3
  • 1
    It seems to work fine by taking out inline-block. Fiddle: jsfiddle.net/fEa4J Did I miss something?
    – crush
    Commented May 30, 2013 at 18:07
  • in your fiddle, notice that the width of the paragraphs are not the actual width of the text, which is what I am trying to work with
    – user1115666
    Commented May 30, 2013 at 18:10
  • Oh, I see. Didn't pick that up in your question the first time.
    – crush
    Commented May 30, 2013 at 18:11

2 Answers 2

Reset to default
1

You need an .each() loop to find the width and apply the margin to each paragraph individually:

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

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

That said, as long as you have inline-block applied to the paragraphs, I don't think they're going to look anything like the way you want them to. What exactly is your end design supposed to look like?

Improve this answer
3
  • You beat me to the .each(), I can't believe how fast folks answer these questions! I am betting this is what he is getting at: jsfiddle.net/sanpopo/YNJMs
    – Popo
    Commented May 30, 2013 at 18:14
  • Sanpopo, your paragraphs are all the same width. I want the text to behave like it normally would, line breaks and all — the only difference is that I want it to be centered based on it's width
    – user1115666
    Commented May 30, 2013 at 18:16
  • I edited the question to include an example of how I want the text to behave. It's just left-aligned text that is centered based on it's width, but still behaves as if it was just text-align: center
    – user1115666
    Commented May 30, 2013 at 18:29
0

I think this will be about as close as you can get unless you add more formatting/elements to the markup:

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 />');    
   });
});
Improve this answer