html - 一个带有输入的 div 和另一个里面的 div

Question

如何让 input 与 div #submitKeyword 对齐？

FIDDLE

HTML:

<div class="searchKeywords">
<input id="inputKeyword" type="text" name="keywords" placeholder="What are you looking for?">
<div id="submitKeyword"></div>
</div>

CSS:

.searchKeywords { 
height: 100%; 
width: 100%; 
margin-top: 70px; 
text-align: center; 
}

.searchKeywords #inputKeyword {
display: inline-block; 
height: 45px; 
width: 150px; 
border: 2px solid;
}

.searchKeywords #submitKeyword { 
display: inline-block; 
width: 115px; 
height: 45px; 
border: 1px solid #000; 
background-image: url('/www/assets/newImages/gallery/Lupa.png');
background-repeat: no-repeat;
background-position: center;
}

Answer 1

使用vertical-align: middle;

.searchKeywords { 
    display: inline-block;
    height: 100%; 
    width: 100%; 
    margin-top: 70px; 
    text-align: center; 
    vertical-align: middle;
}

.searchKeywords #inputKeyword {

    height: 45px; 
    width: 150px; 
    border: 2px solid;

}

.searchKeywords #submitKeyword { 
    display: inline-block; 
    width: 115px; 
    height: 45px; 
    border: 1px solid #000; 
    background-image: url('/www/assets/newImages/gallery/Lupa.png');
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

检查此链接 http://jsfiddle.net/amoljawale/B45P5/1/