Home >Web Front-end >HTML Tutorial >input control please enlighten me! _html/css_WEB-ITnose

input control please enlighten me! _html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:58:051144browse

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


Reply to the discussion (solution)

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn