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;
}
精彩评论