Friday, March 4, 2016

align items center horizontally and vertically using css




In this tutorial i am going to use three css properties to align the text or image center, most of the designers who don't know they often use margin-top, line-height etc. But thats not the perfect solution so just take few minutes to apply this in your designs its really helpful.


Step - 1 : CSS

html,body{
  height: 100%
}

.container{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Step - 2 : HTML

<div class="container">
    <h4>This is a sample text</h4>
</div>


Finished.


1 comment:

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress website development Chennai

    ReplyDelete

Copyright © www.sureshsharma.info All rights reserved