How To Center DIV Tag?
DIV tag is often used for page layout or messages. In both cases, designer could try to center DIV on page. DIV tag has very little parameters. There is align parameter that we can set to "center", but that will align text inside a div, and will not center div itself. To center div tag on web page, use this CSS code:
[ CSS ]
/* Needed for Internet Explorer 5
If you ignore earlier versions of IE,
you can ignore this part */
body {
text-align: center;
}
/* Needed for other web browsers */
#centeredDiv {
/* This line will center div tag */
margin: 0 auto;
/* Set width of the div to 500 pixels */
width: 500px;
/* Get text-align back to left after centered before */
text-align: left;
}
Now, in HTML of web page, somewhere inside BODY tag, place DIV like this:
[ HTML ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page with centered div tag</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centeredDiv">
Content of DIV tag</div>
</body>
</html>
P.S. Don't forget to relate page wih CSS file in HEAD section with line:
<link href="style.css" rel="stylesheet" type="text/css">
Related articles:
1. How To Create Link Without Underline?
