html - Unable to align two div's vertically in one line -
i having 2 divs. 1 text box , button. unable align both divs vertically. need text box , button of equal height , vertically aligned in same line. wrong?
.inputholder{ border:1px solid #fff; vertical-align:middle; } .input{ margin-top:150px; width:100px; height:50px; border:1px solid black; font-size:1.2em; padding:5px; display:inline-block; } .input:focus{ outline:0; } .gobtn{ height:50px; width:200px; border:1px solid black; display:inline-block; }
<html> <body> <div class="inputholder"> <input type="text" class="input"> <input type="submit" value="go" class="gobtn"> </div> </body> </html>
display flex
on parent make them same height , side-by-side
.inputholder { border: 1px solid #fff; display: flex; justify-content: center; } .input { width: 100px; border: 1px solid black; font-size: 1.2em; padding: 5px; } .input:focus { outline: 0; } .gobtn { width: 200px; border: 1px solid black; }
<div class="inputholder"> <input type="text" class="input"> <input type="submit" value="go" class="gobtn"> </div>
Comments
Post a Comment