Перемещение текста вверх?

Question

У меня есть страница , и если вы посмотрите на верхний правый поиск ... мне нужно переместить текстовый поиск примерно на 2 пикселя, чтобы он был по центру с изображением, но я выровняю текст по вертикали выровняю или padding не делают то, что я хочу, вот мой CSS

#Search {
background: url("/images/no-letters-search.png") no-repeat scroll 0 0 transparent;
border: medium none;
font-size: 15px;
height: 37px;
left: 31px;
padding-left: 26px;
position: relative;
top: -3px;
width: 175px;
font-family: Helvetica, sans-serif;
}

и вот мой HTML

<form id="search_form" method="post" action="/mm5/merchant.mvc?">
 <input type="text" name="Search" id="Search" tabindex="0" />
 <input name="Screen" type="hidden" value="SRCH" />
</form>

Answer 1

Эмм, попробуйте line-height:18px; - это может сделать это.

Answer 2

Текст фактически уже центрирован с полем ввода.Проблема в том, что ваше поле ввода выше, чем фактическое изображение, которое вы поместили за ним, поэтому визуально оно выглядит нечетным (технически оно уже центрировано).

Ваше текущее поле ввода имеет высоту 37 пикселей, но из-заполе ввода представляет собой элемент блочной модели с рамкой (средний), ваш бокс на самом деле имеет высоту около 41 пикселя.Вам нужно либо удалить границу, либо просто сократить размер поля ввода до 34 или 33 пикселей.

Или вы можете просто правильно переписать "border: medium none;"в "border: 0".

Если ничего из этого не имеет смысла, я советую немного изучить модель CSS на http://www.w3.org/TR/CSS21/box.html.

Answer 3

Как упомянуто выше, попробуйте установить высоту строки, равную высоте поля ввода, которое должно центрировать текст одной строки.