How do I vertically align text in a div?

Total
0
Shares

I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work.

_x000D_

_x000D_

.testimonialText {_x000D_
  position: absolute;_x000D_
  left: 15px;_x000D_
  top: 15px;_x000D_
  width: 150px;_x000D_
  height: 309px;_x000D_
  vertical-align: middle;_x000D_
  text-align: center;_x000D_
  font-family: Georgia, "Times New Roman", Times, serif;_x000D_
  font-style: italic;_x000D_
  padding: 1em 0 1em 0;_x000D_
}

_x000D_

<div class="testimonialText">_x000D_
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor_x000D_
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum._x000D_
</div>

_x000D_

_x000D_

_x000D_


Solution

The correct way to do this in modern browsers is to use Flexbox.

See this answer for details.

See below for some older ways that work in older browsers.


Vertical Centering in CSS

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Article summary:

For a CSS 2 browser, one can use display:table/display:table-cell to center content.

A sample is also available at JSFiddle:

_x000D_

_x000D_

div { border:1px solid green;}

_x000D_

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

_x000D_

_x000D_

_x000D_

It is possible to merge hacks for old browsers (Internet Explorer 6/7) into styles with using # to hide styles from newer browsers:

_x000D_

_x000D_

div { border:1px solid green;}

_x000D_

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

_x000D_

_x000D_

_x000D_

Source: StackOverflow.com

Leave a Reply

Your email address will not be published. Required fields are marked *