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
its that simple
this the actual code i had in my .css file:
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
as you can see, its not aligning in the center of the page right?? now all the HTML code with the following:
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:
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;
}
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><!-- content -->
</div><!-- main -->
</body>
</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><!-- content -->
</div><!-- main -->
</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><!-- content -->
</div><!-- main -->
</body>
</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><!-- content -->
</div><!-- main -->
</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.......
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
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?!
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!
Related Content
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
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
Date: Sun Mar 02, 2008
Author hostman Received 53 Replies #714
Share
URL: 

Embed: 

To embed this topic, just copy the code from the "Embed" box. Once you've copied the code, just paste it into your website or blog to embed it
BBCODE:: 

BBCODE is use on forums. You can put this code on all your BBCODE enabled forums like PhpBB, vBulletin® and others. Just Copy and Paste this code on your Posts and Replies on your forums
wallpaperama | Wallpapers | Forums | Terms Of Service
copyright © 2013 wallpaperama - All Rights Reserved - Last Updated Mon May 06, 2013 (-8 GMT)
Powered by: Webune Forums V5
copyright © 2013 wallpaperama - All Rights Reserved - Last Updated Mon May 06, 2013 (-8 GMT)
Powered by: Webune Forums V5