Text align in a DIV that is centered

How do I align text to the left on a开发者_C百科 div that is centered on the screen ?

---

Use margin: auto to center the div, and text-align: left to align the text:

HTML:

<div class='example'>Hi!</div>

CSS:

.example {
    margin: 0 auto;
    width: 100px;
    text-align: left;
    border: 1px solid red;
}

Working example: http://jsfiddle.net/RichieHindle/4XHDt/1/

Note that the text-align: left isn't necessary in this example because left-alignment is the default. You only need it if the alignment has been set to something other than left by a parent element.

---

Apply text-align : left to your div.

---

Apply centering to a container, and left-align the inner div:

<div id="container">
    <div id="content">left-aligned content goes here</div>
</div>

/* style.css */
#container { text-align: center; }
#content { text-align: left; }

---

Either in your css or as an inline style (not recommended, but it works):

text-align:left;

---

Simply use text-align:left.

Note: Just because the div is centered, doesn't mean the text is centered by default. Take a look at this jsFiddle for an example.

#myDiv
{
    width:200px;
    margin: 0 auto;
    text-align:left;
}