CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 299

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.

Upvotes: 28

Views: 294288

Answers (4)

nikc.org
nikc.org

Reputation: 16962

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

Upvotes: 13

Stephen
Stephen

Reputation: 47

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;
}

Upvotes: 0

Stephen Wood
Stephen Wood

Reputation: 846

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>

Upvotes: 42

Kleber S.
Kleber S.

Reputation: 8240

Try:

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

Upvotes: 15

Related Questions