Vertically Align Text Using CSS

  james Posted on 

Centering elements vertically with CSS is something that often gives designers trouble. This may look simple, but for those who code rarely on CSS, there is a high probability that they miss out on few things. I personally had an experience, so this tip might help few folks out there. For a variable amount of text that you want to center vertically and horizontally, you can use display: table-cell and vertical-align: middle. Let us do this in some style.

/** Wrapper Style */
<style type="text/css">
  .wrapper {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    border: 1px dotted #656565;
  }
</style>

/** Wrapper Container */
<div class="wrapper">
  This is an example text for the center align text or content vertically with CSS.
</div>

You may be interested in our other posts on free vortex WordPress theme and count current month posts.