Set a div width, align div center and text align left

问题:

I have a small problem but I can't get it solved. I have a content header of 864px width, a background image repeated-y and footer image. Now I have this <div> over the background image and I want it to be like 855px width and the text align left but yet aligned center so it fits in the bg.

I once had it oke width some padding left but I figured out that was the correct padding for my screen resolution.

Soo briefly it is: Setting a div width - align the div center - align its text (content) left.

回答1:

Set auto margins on the inner div:

<div id="header" style="width:864px;">     <div id="centered" style="margin: 0 auto; width:855px;"></div> </div> 

Alternatively, text align center the parent, and force text align left on the inner div:

<div id="header" style="width:864px;text-align: center;">     <div id="centered" style="text-align: left; width:855px;"></div> </div> 

回答2:

Try:

#your_div_id {   width: 855px;   margin:0 auto;   text-align: center; } 

回答3:

Use auto margins.

div {    margin-left: auto;    margin-right: auto;    width: NNNpx;     /* NOTE: Only works for non-floated block elements */    display: block;    float: none; } 

Further reading at SimpleBits CSS Centering 101

回答4:

All of these answers should suffice. However if you don't have a defined width, auto margins will not work.

I have found this nifty little trick to centre some of the more stubborn elements (Particularly images).

.div {    position: absolute;    left: 0;    right: 0;    margin-left: 0;    margin-right: 0; } 

文章来源: Set a div width, align div center and text align left