Blog for web designers

Easy vertical align

In this post you will see how to make a easy vertical align object only with css.

Easy Vertical Align

Easy vertical align make any inline element or block level element center vertically with css transform properties. With few couple lines of code you can achieve the target.

SASS CODE


@mixin vertical-align {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

p {
  @include vertical-align;
}

css code


p {
  position: relative;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

HTML code


<section class="text">
    <p>I'm vertically aligned.</p>
</section>

Demo

I’m vertically aligned

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


Leave a Reply

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

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