CODEWITHSUNDEEP
htmlcsspositioning
Parijat Kalia
Parijat Kalia

Reputation: 5085

Positioning a nested element w.r.t to it's immediate parent

Not sure what I am getting wrong here, but let's say I have two divs, and an h1 element (or P1) for that matter that looks like this:

<div class="wrapper">
 <div class="top">
    <h1>Content header</h1>
 </div>
</div>

I want my element to appear in the 'center middle' of the inner div, that is it's immediate parent. To achieve this, I give it a margin-top:50% & a margin-left:50% with the understanding that this would render it exactly towards the center middle of the div. But while it does get it to the middle, it doesn't quite get it to the center. Infact it seems to position itself relative to the outer div, the one with class wrapper.

I have recreated this using jsfiddle here:

http://jsfiddle.net/KLRsN/

Am I specifying the selectors wrong or is my positioning in itself incorrect?

Upvotes: 0

Views: 491

Answers (2)

Varun Nath
Varun Nath

Reputation: 5632

-the above ans isnt completely correct as the text will still not be completely centered vertically.

.wrapper{
  margin:5px;
  max-height:250px;
  min-height:250px;/*not required only height:250px will do*/
  border:1px solid green;
}

.content
{
  margin:5px;
  border:1px solid black;
  height:100px;/*you have to give the parent element a height and a width within which you wish to center*/
  width:100px;
  position:relative;/*giving it a position relative so that anything inside it will be positioned absolutely relative to this container*/
  text-align:center;/*aligning the h1 to the center*/
}
.content h1{
border:1px solid black;
 position:absolute;
top:50%;
  left:50%;
  line-height:50px;
  width:50px;
    margin-left:-25px;/*half the width of the h1 so that it exactly centers*/
  margin-top:-25px;/*half the height of the h1 so that it exactly centers*/
}

explanation:

-ever element in html is in the form of a rectangular box so applying margin-top:50% is aligning the top of that box to 50% of the parent element and not the text inside the box. -that is the reason the text is not exactly aligned to the center.

-also it is essential to provide the parent element(within which you wish to center the h1) a width and height.

The correct way to do what you are looking for would be by using absolute and relative positioning.

-give the .container a position value of relative and the h1 a value of absolute

-by giving the h1 a width and height we then apply a negative left margin equal to half the width and a negative top margin equal to half the height so that the text is exactly centered.

  • also for more on positioning - check out the following link

Upvotes: 1

Nitesh Patil
Nitesh Patil

Reputation: 388

If you want to display text content at a middle you can use text-align:center , or you can apply width to your h1 tag and use margin:auto. To position it vertically middle use relative position and top:50% . Try this css

.wrapper{
   height:250px;
   min-height:250px;
   border:1px solid green;
  }

 .content{
  position:relative;
  top:50%;
   border:1px solid black;
 }
 .content h1{
   border:1px solid blue;
   margin:auto;
   width:100px;
   background:red
 }

Hope it helps

Upvotes: 0

Related Questions