Question

如何让input与div #submitKeyword对齐？

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。也可以使用margin: auto代替text-align:center来对齐中间的元素。

<强> 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

一个div与输入和其他div内

2 个答案: