double

Question

I have some text that I want simultaneously centered on the page and the text within the paragraph to be adjusted to the left? A little help?

this is what I've been trying

      <p align="center"><div align="left>text<br>more text</p></div>

obviously not working this just shifts everything left

You can't put
inside a
.
– Paul Tomblin Sep 20 '12 at 01:00 — Paul Tomblin, Sep 20 '12 at 01:00
http://stackoverflow.com/a/4291608/3333 – Paul Tomblin Sep 20 '12 at 01:02 — Paul Tomblin, Sep 20 '12 at 01:02
http://www.w3.org/TR/html401/struct/text.html#h-9.3.1 – Paul Tomblin Sep 20 '12 at 01:04 — Paul Tomblin, Sep 20 '12 at 01:04
sorry, that was rude, forgive me – Doug Sep 20 '12 at 01:13 — Doug, Sep 20 '12 at 01:13

Tim M. · Answer 1 · 2012-09-20T01:10:11.553

align="center" and align="left" are deprecated. Use CSS instead.

Here's one way to do it (assuming you want 2 nested elements, or see Brad's method for centering a single element): http://jsfiddle.net/EzNJQ/1/

<div id="outer">
    <p id="inner">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    </p>
</div>

#outer{
    width: 300px;
    margin: 0 auto; /* centers */
}
#inner {
    text-align: left;   
}

More examples: http://www.w3.org/Style/Examples/007/center.en.html

score 0 · Accepted Answer · answered Sep 20 '12 at 01:08

What the troubling part (although IE is always different) is that in order for an item to be centered the horizontal margins need to be set to auto (allowing the browser to actually center the content). So, with that being said:

p.centered {
    margin: 0px auto;
    width: 300px;
    border: 1px solid #f0f;
}

<p class="centered">This is your paragraph</p>

The width is your call (and I've added a border for clarity) but just set the side margin to auto and the content will be left-aligned (unless otherwise specified by text-align).

double

2 Answers2