[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2009-05-14
11
Medium Priority
?
365 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…
Suggested Courses

872 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