?
Solved

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

Posted on 2009-05-14
11
Medium Priority
?
362 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 200 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 200 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

752 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