Wallpapers Forums Login

CSS How To Align Center A Div Make Div Tag Align Center Css

Posted On Sun Mar 02, 2008 By hostman In HTMLForums And Topics Discussions Help for Hyper Text MarkUp Language Forums

today i had a css file and i was trying to align a div i had and i wanted to make it align center

but there is not center propertie there is only align text or float left or float right but no float center so how can you make a div section align to cneter? well, its easy all you have to do is use this:

CSS CODE EXAMPLE

margin:0 auto;

its that simple

this the actual code i had in my .css file:

.main {
padding: 10px;
width: 798px;
border:1px solid #ccc;
margin:0 auto;
}

NOTE: in order for margin:0 auto; to work, you must make sure to put the width of the div, if you only put margin:0 auto; without width, then it will not align to the middle.

let me give you two examples..

in this example, the align center does not work when i test it internet explorer:

if you are using windows like i am, start a new notepad and copy and paste the following code. save it as test.html - then open it with internet exploere.. im using ei version 9

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Center Div in Internet Explorer by Wallpaperama.com</title>
<style type="text/css">
body {
background-color: #272727;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}.main {
width: 980px;
padding: 10px;
margin:0 auto;
border: 12px solid #999;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="main">
<div id="content">
<H1>HI THERE</h1>
</div>
</div>
</body>
</html>

as you can see, its not aligning in the center of the page right?? now all the HTML code with the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Center Div in Internet Explorer by Wallpaperama.com</title>
<style type="text/css">
body {
background-color: #272727;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
}.main {
width: 980px;
padding: 10px;
margin:0 auto;
border: 12px solid #999;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="main">
<div id="content">
<H1>HI THERE</h1>
</div>
</div>
</body>
</html>

did the second example worked? did you noticed the difference? there was not difference in the CSS code, the only difference was this line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

hope that helps..

here's another example:

Example Code. Try It.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Div By Wallpaperama !!!!</title>
<style type="text/css">
.main {
	width: 980px;
	padding: 10px;
	margin:0 auto;
	border: 1px solid #F00;
}
</style>
</head>
<body>
<div class="main">Centered Div By Wallpaperama !!!!</div>
</body>
</html>

Tushar Tue Apr 10, 2012

The given code is nt working plzz suggest me any codes.

Gregor Thu Apr 05, 2012

You can always put the whole content into another DIV and center this one ..

lucyfer Mon Mar 19, 2012

hi, i completely design my webpage using jquery slider. if i m using flash for banner at place of slider then in o/p webpage center align but when use slider then give left align.
i want center align how is this possible.......

Rishabh Fri Feb 24, 2012

Surelly it can work, but if the parent size is changing then it wont work, when the parent and child both size are fixed then it will work else it wont, so plz give me another solution.

shubham Sun Dec 25, 2011

thanx it works.

Ethan Sun Dec 04, 2011

Thx..it works for me!!

Hoeun Sun Nov 13, 2011

it's work on fire fox and chrome but on Internet Explorer is not work.

Moka Fri Nov 04, 2011

just make margins auto
the code will be
div.alignme{
margin-left

Stephen Thu Oct 13, 2011

Thanks man

Mayur Sun Oct 02, 2011

This does not seem to be working on the latest version of the IE.

I have been using it for a while on some of the website but why is it not working when i upgraded my IE?

It works on already created websites but when i am creating now, its not working.

Weird?!

Jeffery Mon Sep 12, 2011

Thanks a lot :) it worked :D

narinder Tue Aug 30, 2011

thnx man ... its working

Daniel Sun Jul 10, 2011

You write like a first grader: No capital letters and no punctuation. Why would you make it so hard to read especially when you are asking for help? Are you uneducated?

julian Tue Jun 07, 2011

thanks it works

Ryan Tue Apr 26, 2011

Awesome, works great, saved my life!

Information

Forums »
HTMLForums And Topics Discussions Help for Hyper Text MarkUp Language »
CSS How To Align Center A Div Make Div Tag Align Center Css

Title: CSS How To Align Center A Div Make Div Tag Align Center Css

Description: CSS How To Align Center A Div Make Div Tag Align Center Css

Tags: css ,how ,to ,align ,center ,a ,div ,make ,div ,tag ,align ,center ,css

Info: This Post Has Been Viewed 0 Times Since
Date: Sun Mar 02, 2008
Author hostman Received 53 Replies #714

Make Css Links All Same Making Link In Css Behave The Same

CSS How To Align Center A Div Make Div Tag Align Center Css

Related Content

Information

Share