CSS – Vertical align the div content

We can vertical align the content of inside a <div> by the following CSS.

v-align-div {
  display: table-cell;
  vertical-align: middle;
}

 

Here is a simple HTML example which demonstrates the vertical alignment.

<html>
  <head>
    <style type="text/css">
      .blue  { background-color: blue;  }
      .green { background-color: green; }
      .red   { background-color: red;   }
      
      .v-align-div {
        color: white;
        text-align: center;
        width: 160px;
        height:120px;
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="v-align-div blue">Hello World</div>
      <div class="v-align-div green">Hello<br/>World</div>
      <div class="v-align-div red"><a href="http://eureka.ykyuen.info">Visit<br/>my<br/>blog</a></div>
    </div>
  </body>
</html>

 

Please note that the above method does not work in Internet Explorer 7 or below and you can find more solutions suggested by YIJEN in the reference link below.

Done =)

Reference: CSS Vertical Align(用純CSS解決div垂直置中)

One thought on “CSS – Vertical align the div content”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.