Solved

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

Posted on 2009-05-14
11
347 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now