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.


3 comments:

  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
  2. Once in a while I invest more energy advancing myself than I do really accomplishing the work itself.Webdesign

    ReplyDelete

Copyright © www.sureshsharma.info All rights reserved