Solved

div of width 200px and height 200px center  align it

Posted on 2009-05-14
11
351 Views
Last Modified: 2012-05-07
i want to center align a div whose width is 200px and height is 200px. Please tell me how to do it
0
Comment
Question by:SunScreenCert
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 3

Expert Comment

by:mharfouch
ID: 24390831
your div cant be absolutely positioned to start with, so change if it is.

then add to the body of your css
margin-left="auto"
margin-right="auto"

and it should create an ever margin on both sides, centering the div
0
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24390956
body {background-color: white;
      margin-left: auto;
      margin-right: auto;

      }
div {
     height: 200px;
     width: 200px;
      background-color: blue;
      
      

}
this is my css, it is not working...center align, i mean in the center with margin-top and bottom also auto
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24391186
Without seeing your html layout it makes it kindof hard, but here are a couple choices:

The way you have it in the code above will work if you set width for the body, and no other css is getting in the way.

You could simply add the margin: auto auto to the div, should also work.

Also on the parent of the div in question you could use the text-align:center setting.

good luck,

dday

0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 4

Expert Comment

by:jasemhi
ID: 24391456
Here is what ddayx10 is talking about (minus the width of the body tag):
body {background-color: white;}
div {height: 200px;width: 200px;background-color: blue;margin-left: auto;  margin-right: auto;}

Open in new window

0
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24391862
not working it makes it center from left and right but not from top and bottom
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24391900
What solution did you end up with that creates this state of "not working"?

Usually I dont expect to get a top/bottom margin to align automatically. I put the elements inside of a parent container. As the elements fill the container there is automatic placement of "verticle center", and then to make it all look nice Ill add some padding to the container. If the padding is the same on top/bottom then it is "vertically centered".

It would be best if you would show your html/css and outline exactly where the problem is, and what your expectations are for a solution.

dday
0
 
LVL 2

Author Comment

by:SunScreenCert
ID: 24392048
here is my total code

<html>
  <head>
    <title>Growing and Shrinking Div</title>
      <style type="text/css">
body {background-color: white;
      
      

      }
div {
     height: 200px;
     width: 200px;
      background-color: blue;
margin: auto auto auto auto;
      
      

}
</style>
   
  </head>

  <body>
    <div id="resize">
      </div>
  </body>
</html>
 
0
 
LVL 20

Assisted Solution

by:ddayx10
ddayx10 earned 50 total points
ID: 24392275
I hope this helps.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Growing and Shrinking Div</title>
	  <style type="text/css">
	  	body
	  	{
	  		background-color: white;
 
	  	}
	  	div
	  	{
	  		height: 200px;
	  		width: 200px;
	  		background-color: blue;
	  		margin: 25% auto;
	  	}
	  </style>
    
  </head>
 
  <body>
    <div id="resize"></div>
  </body>
</html>

Open in new window

0
 
LVL 20

Accepted Solution

by:
ddayx10 earned 50 total points
ID: 24392291
It actually might be better to do this:

div
{
height: 200px;
width: 200px;
background-color: blue;
margin: 25% auto auto auto;
}
0
 
LVL 3

Expert Comment

by:mharfouch
ID: 24392547
put vertical-align:middle;

in your div css
0
 
LVL 20

Expert Comment

by:ddayx10
ID: 24392574
pretty sure that will only work with a table.
Tested it here
removed margin: 25% auto auto auto;
added vertical-align:middle;
no joy...
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question