css - How to vertically center divs? -
i'm trying make small username , password input box.
i ask, how vertically align div?
what have is:
<div id="login" class="blackstrip floatright"> <div id="username" class="floatleft">username<br>password</div> <div id="form" class="floatleft"> <form action="" method="post"> <input type="text" border="0"><br> <input type="password" border="0"> </form> </div> </div>
how can make div id username , form vertically align center? i've tried put:
vertical-align: middle;
in css div id login, doesn't seem work. appreciated.
the best approach in modern browsers use flexbox:
#login { display: flex; align-items: center; }
some browsers need vendor prefixes. older browsers without flexbox support (e.g. ie 9 , lower), you'll need implement fallback solution using 1 of older methods.
recommended reading
Comments
Post a Comment