Wednesday, December 24, 2014

Text inside a div to align both vertically and horizontally.

<style type="text/css">

html, body{
   height:100%;
   width:100%;
   margin: 0 auto;
}
#dvTxt{
   background-color:#33b5e5;
   height:100%;
   width:100%;
   text-align: center;
   vertical-align: middle;
   font-family: verdana;
   font-size: 25px;
}
p {
   position: relative;
   top: calc(50% - 1em);
}

</style>


<div id="dvTxt">
    <p>This is my text. I want it to be centered vertically</p>
</div>


Output :)


No comments:

Post a Comment