一格与输入和其他div

我怎样才能得到input与div #submitKeyword对齐？一格与输入和其他div

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; 
}

来源

2014-07-05 user3629180

使用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/

来源

2014-07-05 15:29:04 amol

好，但在该方式的'input'不会是与如'＃submitKeyword' – user3629180

改变输入场高度的高度相同的高度：41px;输入字段具有从顶部和底部的默认1px填充。试试这个链接http://jsfiddle.net/amoljawale/B45P5/13/ – amol

谢谢！而已 – user3629180

我建议和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

来源

2014-07-05 15:37:32

一格与输入和其他div

回答

相关问题