html - h2's are not in the same vertical line -
i make 2 h2's in 1 vertical line, first letter on same horizontal position. here's
html, body { height: 100%; } .login { margin: 0; padding: 0; background-image: url(https://static.pexels.com/photos/279315/pexels-photo-279315.jpeg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 100%; width: 100%; } #hdtxt { font-family: 'titillium web', sans-serif; font-size: 48px; font-weight: 600; text-align: center; padding-top: 50px; } #mail { font-family: 'titillium web', sans-serif; font-size: 38px; font-weight: 400; text-align: center; padding-top: 50px; padding-right: 700px; } #pwd { font-family: 'titillium web', sans-serif; font-size: 38px; font-weight: 400; text-align: center; padding-top: 50px; padding-right: 700px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="login"> <h1 id="hdtxt">login</h1> <h2 id="mail">email:</h2> <h2 id="pwd">password:</h2> </div>
well found out there isn't problem because text isn't centered here. problem isn't not getting centered (it on private page). problem is: when centered, looks this:
....email:
password:
(the ....'s spaces)
thanks can help.
just erase text-centering , use same padding-left
both, preferrably percentage value:
html, body { height: 100%; } .login { margin: 0; padding: 0; background-image: url(https://static.pexels.com/photos/279315/pexels-photo-279315.jpeg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; height: 100%; width: 100%; } #hdtxt { font-family: 'titillium web', sans-serif; font-size: 48px; font-weight: 600; text-align: center; padding-top: 50px; } #mail { font-family: 'titillium web', sans-serif; font-size: 38px; font-weight: 400; padding-top: 50px; padding-left: 40%; color: yellow; } #pwd { font-family: 'titillium web', sans-serif; font-size: 38px; font-weight: 400; padding-top: 50px; padding-left: 40%; color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="login"> <h1 id="hdtxt">login</h1> <h2 id="mail">email:</h2> <h2 id="pwd">password:</h2> </div>
or can put these 2 in wrapper center....
Comments
Post a Comment