CODEWITHSUNDEEP
htmlcsscenteringnested
Muteking
Muteking

Reputation: 1513

Centering child div to parent div

This should work. I just want that the nested div is in the center of the parent div. Is this at least the correct approach to center something, or am I way off the standards? I'm just beginning to build my websites.

#container {
    position:relative;
    width:980px;
    height:900px;
    margin:auto;
    border:1px solid red;
}

#logo {
    width:960px;
    height:305;
    margin: 0 auto;
    position:absolute;
}

and the markup

<body>
   <div id = "container">
        <div id = logo><img src="img/johndoe.jpg" width="960" height="305"/></div>
   </div><!-- end of container -->
</body>

Actually, the nested div is at the leftmost of the container.

Upvotes: 0

Views: 286

Answers (3)

skeep
skeep

Reputation: 940

Try checking out http://codepen.io/skeep/pen/nGupC

html

<div class="container">
  <div class="logo"><img src="http://placehold.it/350x150" alt="" /></div>
</div>

css

.container {
    width:980px;
    height:900px;
    margin:auto;
    border:1px solid red;
}

.logo {
    width:350px;
    height:150px;
    margin: 0 auto;
}

Upvotes: 1

Love Trivedi
Love Trivedi

Reputation: 4046

remove possition:absolute; from .logo

#container {
    position:relative;
    width:980px;
    height:900px;
    margin:auto;
    border:1px solid red;
}

#logo {
    width:960px;
    height:305;
    margin: 0 auto;
    /*position:absolute;*/
}

Upvotes: 1

artplastika
artplastika

Reputation: 1982

Remove position:absolute; for the logo.

Upvotes: 2

Related Questions