html - Vertical alignment in css responsive -
this question might answered 1 , may sound silly. align element whether text, image or div align in center vertically , should work in responsive screens. did try adding margin-top manual percentages. know if there simple , best way make vertical alignment responsive.
i did research in google it, of them suggested change display property of container table , div table cell , use vertical alignment middle. sounds simple effects other elements in page don't want table. hence i'm looking best alternate option. please help. thank in advance :)
.in-middle{ width:100%; margin-top: 25%; }
<body> <div class="in-middle"> <h1>this should aligned in center</h1> <p>paragraph should centered</p> </div> </body>
use following solution using tranform
property:
.in-middle{ position: absolute; top: 50%; transform: translatey(-50%); }
<body> <div class="in-middle"> <h1>this should aligned in center</h1> <p>paragraph should centered</p> </div> </body>
Comments
Post a Comment