www.webdeveloper.com
Results 1 to 4 of 4

Thread: Div in center

  1. #1
    Join Date
    Dec 2011
    Posts
    39

    Div in center

    I am using these code

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>hello</title>
    <meta name="" content="">
    
    <style type="text/css">
    #container {
    	margin:0 auto;
    	background-color:orange;
    	color:blue;
    	padding:10px;
    	width:300px;
    	height:300px;
    	font-size:24px;
    	font-weight:bolder;
    	vertical-align:central;
    	text-align:center;
    	}
    </style>
    
    </head>
    <body>
    
    <div id="container">I am in the center of this div horizontally and vertically.</div>
    
    </body>
    </html>
    I want to display div in center of screen, (both horizontally and vertically).

    Text in this div must also appear in vertically center.

    Please help

  2. #2
    Join Date
    Mar 2013
    Posts
    23
    So you are using inline styling....
    Firstly,
    replace
    Code:
    background-color:orange;
    with
    Code:
    background-color:#FFA500;

    To center the content box:

    add
    Code:
    margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;

    For what you want:

    Code:
    <div style="display: table; height: 300px; overflow: hidden; background-color:#	FFA500; color:#0000FF; font-weight:bolder;font-size:24px; padding:10px; margin:auto;">
         <div style="display: table-cell; vertical-align: middle;">
           <div>
             I am in the center of this div horizontally and vertically.
           </div>
         </div>
       </div>
    Hope that helped

  3. #3
    Join Date
    Mar 2013
    Posts
    23
    To answer your question clearer, use this:

    Code:
    <div style="display: table; height: 300px; overflow: hidden; background-color:#	FFA500; color:#0000FF; font-weight:bolder;font-size:24px; padding:10px; margin:auto;">
         <div style="display: table-cell; vertical-align: middle;">
           <div>
             I am in the center of this div horizontally and vertically.
           </div>
         </div>
       </div>

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,212
    Take a look at source code for dead centering. Or this one: vertically centering stuff

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