CODEWITHSUNDEEP
html
Tony Gil
Tony Gil

Reputation: 13

Child div breaks from parent div. why?

I have a parent div and a child div with some text. I want it vertically centered in the parent div. I can't seem to make the child vertically centered in the parent div. and why is it breaking out of the parent div?

I hope the above makes sense. I was trying to upload an illustration but apparently I need 10 reputation to post image.

Upvotes: 1

Views: 428

Answers (1)

Pbk1303
Pbk1303

Reputation: 3802

Check the below fiddle: It aligns the text vertically middle of the parent div.

http://jsfiddle.net/Kritika/43VYg/

HTML:

<div class="wrapper">
  <div class="inner">
    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
  </div>
</div>

CSS:

.wrapper {
    display: table-cell;
    width: 400px;
    height: 400px;
    text-align: center;
    vertical-align: middle;
    border: 1px dotted #656565;
  }
 
  .inner {
    padding: 10px;
  }

NOTE: This does not support older browsers like IE 7.

You can refer the below link for aligning the text using position absolute/relative

Aligning text using absolute positioning

Upvotes: 1

Related Questions