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

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -