Solved

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

Posted on 2009-05-14
11
348 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to create a tile layout 1 36
Making my existing website "mobile friendly"... 10 34
CSS Question 9 41
I need help embedding an image as HTML in my vb.net application 3 45
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

943 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

3 Experts available now in Live!

Get 1:1 Help Now