입력과 다른 div가있는 div가

Question

input은 #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/

Answer 2

나는 display:table과 함께 제안합니다. 또한 text-align:center 대신 margin: auto을 사용하여 가운데에 요소를 정렬하십시오.

CSS

.searchKeywords { 
    height: 100%; 
    display: table; 
    margin: auto; 
    position: relative; 
    top: 70px; 
} 

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

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

fiddle