#html #css #xhtml
#HTML #css #xhtml
Вопрос:
У меня есть эта страница, и если вы посмотрите на поиск в правом верхнем углу … мне нужно переместить текстовый поиск примерно на 2 пикселя, чтобы он располагался по центру изображения, но я выравниваю текст по вертикали-выравнивание или отступы не делают того, что я хочу, вот мой 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>
Комментарии:
1. firefox 4 на Mac — это мой браузер, но я просматриваю их все
Ответ №1:
Эмм, попробуй line-height:18px; — это может сработать.
Ответ №2:
Как упоминалось выше, попробуйте установить высоту строки, равную высоте поля ввода, по центру которого должен располагаться текст в одну строку.
Ответ №3:
Текст фактически уже центрирован по полю ввода. Проблема в том, что ваше поле ввода выше, чем фактическое изображение, которое вы разместили за ним, поэтому визуально оно выглядит неровным (технически, оно уже отцентрировано).
Высота вашего текущего поля ввода составляет 37 пикселей, но поскольку поле ввода представляет собой элемент модели box с рамкой на нем (medium), высота вашего поля фактически составляет около 41 пикселя. Вам нужно либо удалить границу, либо просто уменьшить размер поля ввода до чего-то вроде 34px или 33px.
Или вы могли бы просто правильно переписать «border: medium none;» на «border: 0».
Если ничего из этого не имеет смысла, я предлагаю немного изучить модель CSS box в http://www.w3.org/TR/CSS21/box.html.