垂直对齐中心输入和div中的按钮(vertical align center input and button in div)
我在div中有一个搜索设置但由于某种原因无法使它垂直对齐中心
这是我的代码 -
HTML:
<div class="search"> <input class="searchfield" type="text" placeholder="Search..." value="" /> <button class="searchbutton">SEARCH</button> </div>CSS:
.search{ padding 0 10px; font-size:0.8em; float:right; height:100%; display:table; vertical-align:middle; } .searchfield{ display:table-cell; } .searchbutton{ display:table-cell; }我究竟做错了什么?
I have a search setup inside a div but for some reason cannot get it to vertically align center
This is my code -
HTML:
<div class="search"> <input class="searchfield" type="text" placeholder="Search..." value="" /> <button class="searchbutton">SEARCH</button> </div>CSS:
.search{ padding 0 10px; font-size:0.8em; float:right; height:100%; display:table; vertical-align:middle; } .searchfield{ display:table-cell; } .searchbutton{ display:table-cell; }what am I doing wrong?
最满意答案
添加等于字体大小的行高。
.search{ padding 0 10px; font-size:0.8em; **line-height: 0.8em;** float:right; height:100%; display:table; vertical-align:middle; }Add a line-height equal to your font-size.
.search{ padding 0 10px; font-size:0.8em; **line-height: 0.8em;** float:right; height:100%; display:table; vertical-align:middle; }更多推荐
发布评论