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
Release: 2016-06-24 11:58:05
Original
1147 people have browsed it

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

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>
Copy after login

input setting padding

set css height line- If the two heights are consistent, they will be vertically centered

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template