Home >Web Front-end >HTML Tutorial >input control please enlighten me! _html/css_WEB-ITnose
How can I center the text in the input control vertically? I have tried a lot of attributes but it doesn’t work. It is also possible to stick to the bottom border if it cannot be centered. Please come up with a solution! ! Thank you
1: Stick to the lower border
Adjust font-size: 14px; or line-height: 20px, etc.
2: Try centering the text vertically. To achieve this, you may need multiple attributes together
style="text-align:center; vertical-align:middle;line -height:20px;height:20px;"
3: Reference
269ba7ebac8d3294cfaa0cae0a990ab7
input ::-moz-focus-inner{ border: 0;padding: 0;}/*For Firefox*/
.comment_btn{
height:26px;
line-height:22px;/*For IE */
width:68px;
}
<div class="search" style="font-size: 12px;text-align: center;height:30px"><input type="text" name="q" class="searcht" style="background-image: url('images/4.jpg');font-size: 18px;vertical-align:middle;"/><input type="submit" class="searchb" style='vertical-align:middle;' value="搜索"/><i style='vertical-align:middle;display:inline-block;height:100%;width:0;overflow:hidden'></i></div>
input setting padding
set css height line- If the two heights are consistent, they will be vertically centered