CODEWITHSUNDEEP
csshtml
Erik Z
Erik Z

Reputation: 4770

Position a div at top and centered inside another div?

I have a div inside another div like this

<div id="outer">

  bla, bla.......

 <div id="inner">
  <p>Test</p>
 </div>
</div>

I want the content of inner-div to apper centered and uppermost in the outer-div. Can that be achieved in css?

Thanks!

Upvotes: 1

Views: 831

Answers (3)

Doug
Doug

Reputation: 3312

In terms of making the inner div centered in the outer div, you want something similar to the following code

<div id='outer'>
Blah Blah blah
<div id='Inner' style='margin: 0 auto; width: 200px;'>
<p>Test</p>
</div>
</div>

As far as uppermost is concerned, I'd recommend just putting the Blah Blah Blah text below the inner DIV as would normally be expected.

Upvotes: 0

Ralf de Kleine
Ralf de Kleine

Reputation: 11734

Its all about the margin

<html>

<style>
#outer
{
    background-color:blue;
    width:400px;
    height:400px;
}
#inner
{
    background-color:green;
    width:200px;
    height:50px;
    margin-left:auto;margin-right:auto;/* <<< */
}

</style>
    <body>
        <div id="outer">

  bla, bla.......

 <div id="inner">
  <p>Test</p>
 </div>
</div>
    </body>
</html>

Upvotes: 0

Han Dijk
Han Dijk

Reputation: 1612

Inner div is always positioned on top of the outer div, centering inner div is possible if it has a fixed width:

#inner {
    width: 100px; //any pixel value here
    margin: 0 auto;
}

Upvotes: 3

Related Questions