www.webdeveloper.com
Results 1 to 10 of 10

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

  1. #1
    Join Date
    Apr 2005
    Posts
    493

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

    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

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    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.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    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

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by Major Payne View Post
    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.

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Quote Originally Posted by tirna View Post
    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.

  7. #7
    Join Date
    Feb 2010
    Location
    Berlin
    Posts
    97
    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.

  8. #8
    Join Date
    Jan 2013
    Posts
    5
    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" />

  9. #9
    Join Date
    Jun 2014
    Posts
    1
    To make a Div at the center of the screen, set

    margin 0 auto 0 auto;

    For align the content inside the Div ..

    <div align="center"> </div>

    More about...Div on center

    ramp.







    Quote Originally Posted by OM2 View Post
    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

  10. #10
    Join Date
    May 2014
    Location
    bangalore
    Posts
    39
    Use this code:

    <html>
    <head>
    <title>REKLAMA HUB</title>
    </head>
    <body>
    <div style="width:960px; margin:0 auto; padding:25px;border:1px solid;">
    <div style="width:300px; margin:0 auto; text-align:center;border:1px solid;">
    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.

    </div>
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles