centering div inside a div

Question

I am a beginner level web designer. This question might have been asked, but I have refered that answers too but they have not helped. My problem is I have a div called "header" and 3 divs inside this div. These are not aligning to the center in the parent div. I have tried many answers but they are not working.

Here is my code:

    #header {
    height: 176px;
    text-align: center;
    position: absolute;
       }
   #header div {
    display: inline;
    text-align: center;
    margin: auto;
    float: left;
    position: relative;

}

#logo {
    height: 156px;
    width: 218px;
    background-image: url(../images/logo_03.jpg);


}

#tagline {
    width: 250px;


}
#badge {
    width: 300px;


}

here is html code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ebhar media</title>
<style type="text/css">
</style>
<link href="style/homestyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {

    min-width:1407px;
}
</style>
</head>

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">
<div id="base">
  <div id="header" align="center">
    <div id="logo"></div>
    <div id="tagline">YOUR SUCESS IS OUR SUCESS</div>
    <div id="badge">Content for  id "badge" Goes Here</div> 
  </div>
  <div id="navbar">Content for  id "navbar" Goes Here</div>
</div>
</body>
</html>

You need to also show us your HTML for the header, plus what you would actually like to see. — KaraokeStu, Jun 05 '13 at 09:00
One possible issue is that your `#header` lost its full width due to being `position: absolute;` - what happens if you give it `width: 100%?` — xec, Jun 05 '13 at 09:03
I just want to say that it's not good to have set `min-width: 1407px;` There are still people using resolution 1024*768 or 1376*768(13 inch notebooks)... — Ms. Nobody, Jun 05 '13 at 10:00
Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 15:20

score 3 · Answer 1 · edited Jun 05 '13 at 11:38

3

remove the position:absolute from #header and remove position:relative, float:left from the #header div

#header {
    height: 176px;
    text-align: center;
/*    position: absolute;*/
}
#header div {
    display: inline;
    text-align: center;
    margin: auto;
/*    float: left;
    position: relative;*/
}

I think this will solve your issue.

Demo: http://jsfiddle.net/UYWqt/

edited Jun 05 '13 at 11:38

Andrea Ligios

49,480
26
114
243

answered Jun 05 '13 at 09:01

Roy Sonasish

4,571
20
31

Yeah this looks sensible. The `text-align: center;` and `margin: auto;` on the `#header div` is also redundant, i believe. – xec Jun 05 '13 at 09:12

score 3 · Answer 2 · answered Jun 05 '13 at 10:18

3

You can simply add some attribute on your div try something like this

<div align="center">
   <div></div>
</div>

answered Jun 05 '13 at 10:18

edd

1,356
7
12

score 0 · Answer 3 · answered Jun 05 '13 at 09:17

The following should work for you:

#header {
    height: 176px;
    width: 100%;
}

#header div { margin: auto; }

#logo {
    height: 156px;
    width: 218px;
    background-image: url(../images/logo_03.jpg);
}

#tagline {
    width: 250px;
}
#badge {
    width: 300px;
}

score 0 · Answer 4 · answered Jun 05 '13 at 11:38

Is that what you exactly need?

http://jsfiddle.net/nJqfn/

Some remarks for future - don't use

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">.

It's better to include normalize.css or reset.css for cross-browser view.
That's

<div id="header" align="center">

not good too. Try to separate view and code.

centering div inside a div

4 Answers4