CODEWITHSUNDEEP
htmlcss
steven
steven

Reputation: 13537

Centre aligned div, that has text aligned to the left

I want that div in the middle of the page, the div should be 561px and the text needs to be left aligned.

<div id="notes">
aaaaaaaaa
a
aaaaaaa
aaaaaaaaa
</div>

Upvotes: 1

Views: 5510

Answers (2)

cletus
cletus

Reputation: 625087

Two things. Firstly:

#notes { width: 561px; margin: 8 auto; text-align: left; }

Secondly, make sure you Webpage has a DOCTYPE declaration (mainly for IE's benefit):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

margin: 0 auto is the standard way of centering a block element. It's a shorthand syntax. See 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin' of Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:

The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.

If there is only one value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

body { margin: 2em }         /* all margins set to 2em */
body { margin: 1em 2em }     /* top & bottom = 1em, right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

So the auto in margin: 0 auto; means:

margin-left: auto;
margin-right: auto;

In this situation the browser will center the block element. IE won't do this unless it is in standards-compliant mode, which you force by providing a DOCTYPE declaration. See Quirks mode and strict mode.

Upvotes: 5

Darrell Brogdon
Darrell Brogdon

Reputation: 6973

In your stylesheet do:

#id {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 561px;
}

Upvotes: 1

Related Questions