html - vertical centering a form in a div -
<div class="parent"> <div class="left-child"> <img src="logo.jpg" alt="logo"> </div> <div class="right-child"> <form action="#"> <input type="text" value="search"> </form> </div> </div>
i vertical center right-child
form when left-child
logo height increases.
can me?
ps: logo uploaded user. have no idea logo height.
i created new div fit form in vertical way. hope works. fixed image width, but, can delete this. http://jsfiddle.net/bfzfj/
your css:
.parent { border: 1px dashed red; display: table; overflow: auto; } .left-child img { width: 50px; height: 50px; } .left-child { border: 1px dashed blue; } .right-child { border: 1px dashed green; display: table-cell; vertical-align: middle; } #your_form { margin: 0 auto; width: 200px; }
your html:
<div class="parent"> <div class="left-child"> <img src="icons.jpg" alt="logo" /> </div> <div class="right-child"> <div id="your_form"> <form action="#"> <input type="text" value="search" /> </form> </div> </div> </div>
hugs, vin.
Comments
Post a Comment