How to centre a div and how to centre the contents of a div

**OM2** · 04-08-2010 06:10 AM

1. I want to centre a DIV
2. I want to centre the contents of a DIV

I did a google and it seems this is not straight forward!
I came across several different answers
I'd be happy to go with one of the answer: but most of these are dated more than 5 years ago - I assumed that the code maybe old and outdated now?

Can someone give me a definitive answer to how to centre a DIV and separately, how to centre the contents of a DIV

Thanks!

OM

**tirna** · 04-08-2010 06:28 AM

To center a div you need to giv it a width and then set its left and right margins to auto.

eg.

Code:

 
#div1 {
width: 50%;
margin: 0px auto 0px auto}

This will centre the div inside its parent element.

Centreing the div's content depends on what the content actually is.

If you can, maybe post your code or example content you want to centre.

**Kor** · 04-08-2010 06:31 AM

To center horizontally a DIV is simple: give it a certain size and give it margin-left:auto and margin-right:auto.

Vertically, it is a more intricate job...but you have not mentioned if you need center vertically as well.

Regarding the second question: it depends on what do you mean by "contents of a DIV". If block elements, they are to be centered as above. If inline elements or text, give the DIV a text-align:center.

**Major Payne** · 04-09-2010 03:59 AM

div#selector_name {
width: XXpx;
margin: 0 auto;
text-align: center;
}

That all you need for the CSS. Make a selector name and set the id="" attribute in the div with the name. All widths must be less than 100% to center.

"text-align: center;" will center the text within the div container.

CSS Tutorials:

http://www.w3schools.com/Css/default.asp
http://www.csstutorial.net/
http://www.echoecho.com/css.htm
http://www.html.net/tutorials/css/
http://www.w3.org/Style/Examples/011/firstcss

http://htmldog.com/guides/cssbeginner/
http://www.davesite.com/webstation/css/
http://www.htmlcodetutorial.com/char...msupp_193.html

**tirna** · 04-09-2010 04:14 AM

Originally Posted by Major Payne

div#selector_name {
width: XXpx;
margin: 0 auto;
text-align: center;
}

That all you need for the CSS.

I disagree - if the content of the div includes child divs, images, tables floated, unfloated, css positioned or whatever then text-align: center on its own is not going to center the div contents.

As mentioned earlier, we need to know what the contents are before they can be centred using css.

**Major Payne** · 04-09-2010 08:35 AM

Originally Posted by tirna

I disagree - if the content of the div includes child divs, images, tables floated, unfloated, css positioned or whatever then text-align: center on its own is not going to center the div contents.

As mentioned earlier, we need to know what the contents are before they can be centred using css.

Need to re-read what I said. The text align only aligns the text. The main div will be centered and the contents, meaning the related text only, will be centered.

When I said that's all there is, I was saying you don't need all the margin: 0 auto 0 auto; coding either. Any other divs inside the div that was being asked about is another matter as stated, but OP didn't asked about div containers inside of div containers. I like to stick to just what is asked without making things complex. If clarification is needed, then I will clarify or answer further questions about the subject.

**Pris** · 04-09-2010 08:45 AM

HTML

Code:

<body>
<div id="container">
...entire layout goes here...
</div>
</body>

CSS

Code:

#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}

Change text-align as needed.

Put all your page's content in "container" and use "position" (in CSS) to make it behave/appear where and how you want it to.

**tazosmr** · 01-24-2013 11:20 AM

1) everything inside div
<div align="center"> </div>

2) For simple text:
<center> dddddddd </center>

3) for images or frames
<img style="display:block;margin-left:auto;margin-right:auto;" align="center" src="xx.jpg" />

Thread: How to centre a div and how to centre the contents of a div

Thread Tools

Display

How to centre a div and how to centre the contents of a div

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions