Выравнять label по центру input - HTML и CSS

keen_ · 26.07.2012, 15:29

Господа, подскажите плиз как выравнять label по центру input?
Сейчас Username и Password находятся слева, а должны быть в центре полей input.

Вот полный код страницы:

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css" media="all">
body {
	font-size: 1em;
	font-family: arial,helvetica,sans-serif;
}
 
h1 {
	font-size:1.3em;
}
 
form#login {
	padding:6px;
	position:relative;
	border:1px solid grey;
}
 
div#username,
div#password {
	position:relative;
	margin-right:3px;
}
 
input#username-field,
input#password-field {
	width:10em;
}
 
label.overlabel {
	color:#999;
}
label.overlabel-apply {
	position:absolute;
	top:3px;
	left:5px;
	z-index:1;
	color:#999;
    cursor:text;
 
}
</style>
 
<script type="text/javascript">
 
function initOverLabels () {
  if (!document.getElementById) return;  	
 
  var labels, id, field;
 
  // Set focus and blur handlers to hide and show 
  // LABELs with 'overlabel' class names.
  labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
 
    if (labels[i].className == 'overlabel') {
 
      // Skip labels that do not have a named association
      // with another field.
      id = labels[i].htmlFor || labels[i].getAttribute('for');
      if (!id || !(field = document.getElementById(id))) {
        continue;
      }
 
      // Change the applied class to hover the label 
      // over the form field.
      labels[i].className = 'overlabel-apply';
 
      // Hide any fields having an initial value.
      if (field.value !== '') {
        hideLabel(field.getAttribute('id'), true);
      }
 
      // Set handlers to show and hide labels.
      field.onfocus = function () {
        hideLabel(this.getAttribute('id'), true);
      };
      field.onblur = function () {
        if (this.value === '') {
          hideLabel(this.getAttribute('id'), false);
        }
      };
 
      // Handle clicks to LABEL elements (for Safari).
      labels[i].onclick = function () {
        var id, field;
        id = this.getAttribute('for');
        if (id && (field = document.getElementById(id))) {
          field.focus();
        }
      };
 
    }
  }
};
 
function hideLabel (field_id, hide) {
  var field_for;
  var labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
    field_for = labels[i].htmlFor || labels[i].getAttribute('for');
    if (field_for == field_id) {
      labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
      return true;
    }
  }
}
 
window.onload = function () {
  setTimeout(initOverLabels, 50);
};
 
</script>
 
</head>
<body>
 
<table border="1" cellpadding="9" cellspacing="0" width="100%">
<tr align="center">
<td>

 <form id="login" action="#" method="post">
 
  <div id="username">
   <label for="username-field" class="overlabel">Username</label>
   <input id="username-field" type="text" name="username" title="Username" value="" tabindex="1" />
  </div>
 
  <div id="password">
   <label for="password-field" class="overlabel">Password</label>
   <input id="password-field" type="password" name="password" title="Password" value="" tabindex="2" />
  </div>
 
  <div id="submit">
    <input type="submit" name="submit" value="Login" tabindex="3" />
  </div>
 
 </form>
 
</td>
</tr>
</table>
 
</body>
</html>

Naive · 26.07.2012, 15:39

Это делается атрибутом placeholder, а не лейблом.

keen_ · 26.07.2012, 15:43

Цитата:

Сообщение от Naive

Это делается атрибутом placeholder, а не лейблом.

Здесь как раз я вас поправлю - вы не правы!

Нужно в данном случае использовать lable - это правильно.
А использование placeholder - это неправильное решение в данном случае

Cronos20 · 26.07.2012, 16:28

Цитата:

Сообщение от keen_

Здесь как раз я вас поправлю - вы не правы!

Нужно в данном случае использовать lable - это правильно.
А использование placeholder - это неправильное решение в данном случае

А давайте я Вас поправлю. Тег label вы никак не запихаете внутрь input, если только не расположить его сверху с помощью абсолютного позиционирования, что глупо. То что вы пытаетесь сделать судя по всему и есть placeholder, о чем вам уже сказали. В противном случае абсолютно не понятно что вы хотите изобразить.

keen_ · 26.07.2012, 16:40

Цитата:

Сообщение от Cronos20

А давайте я Вас поправлю. Тег label вы никак не запихаете внутрь input, если только не расположить его сверху с помощью абсолютного позиционирования, что глупо. То что вы пытаетесь сделать судя по всему и есть placeholder, о чем вам уже сказали. В противном случае абсолютно не понятно что вы хотите изобразить.

Повторяю - в данном случае правильно использовать именно label. Не я это придумал. Вообще эта тема поднималась в инете.

Я тщательно подошёл к вопросу - и узнал, что тот кто юзает placeholder в данной ситуации, тот делает ошибку

Naive · 26.07.2012, 17:38

Использование для этого Label`a — костыль начала 2000х. В стандарте HTML5 для этой цели специально был введен placeholder. По полочкам:
1) с отключенными (рухнувшими) скриптами лейбл никуда не денется и будет мешать набору текста;
2) плейсхолдер будет работать без скриптов (во взрослых браузерах, конечно);
3) семантическая задача лейбла — создание зависимости между поясняющим текстом и инпутом, а не нагромождать его поверх инпута;
4)

Цитата:

Не я это придумал

вероятно, тот кто это придумал данную проблему решил;
5) валидная верстка HTML5 не требует костылей и велосипедов для тривиальных задач.
По-сути любую страницу можно сверстать используя одни только дивы с тоннами CSS & JS, только зачем? Ведь есть ссылки, таблицы, инпуты, картинки, кнопки, селекты, списки... не говоря уже о новых тегах и атрибутах HTML5.

keen_ · 26.07.2012, 17:54

Спасибо за детальные пояснения.
Но почему Яндекс использунт именно lable, а не placeholder в почтовом боксе?
Они это делают специально я думаю.
Мне тоже нужно надёжно и чтобы работало в старых браузерах.

Цитата:

Сообщение от Naive

Использование для этого Label`a — костыль начала 2000х. В стандарте HTML5 для этой цели специально был введен placeholder. По полочкам:
1) с отключенными (рухнувшими) скриптами лейбл никуда не денется и будет мешать набору текста;
2) плейсхолдер будет работать без скриптов (во взрослых браузерах, конечно);
3) семантическая задача лейбла — создание зависимости между поясняющим текстом и инпутом, а не нагромождать его поверх инпута;
4) вероятно, тот кто это придумал данную проблему решил;
5) валидная верстка HTML5 не требует костылей и велосипедов для тривиальных задач.
По-сути любую страницу можно сверстать используя одни только дивы с тоннами CSS & JS, только зачем? Ведь есть ссылки, таблицы, инпуты, картинки, кнопки, селекты, списки... не говоря уже о новых тегах и атрибутах HTML5.

Naive · 26.07.2012, 21:27

Цитата:

Но почему Яндекс использунт именно lable, а не placeholder в почтовом боксе?

Отношение поисковых гигантов к собственной верстке несмотря на свои же рекомендации в принципе несколько странное...
Прямо как в этой цитате с баша:

Цитата:

- товарищ инспектор, перепаркуйте машину с перехода. раз вы ДПС, вам можно что ли?
- да, можно.
- <censored>, а я пожарный, может мне на заправке покурить?

Собственно отсутствие минимизации кода можно списать на широкий канал, а верстку на уровне HTML3 — на неоправданную кроссбраузерность и отстутвие необходимости индексации. В яндексах не работал — реальной причины не знаю).

keen_ · 26.07.2012, 23:16

Мне тоже нужна кроссбраузерность широкая.
Ведь HTML5 не поддерживается старыми браузерами.

Цитата:

Сообщение от Naive

Отношение поисковых гигантов к собственной верстке несмотря на свои же рекомендации в принципе несколько странное...
Прямо как в этой цитате с баша:

Собственно отсутствие минимизации кода можно списать на широкий канал, а верстку на уровне HTML3 — на неоправданную кроссбраузерность и отстутвие необходимости индексации. В яндексах не работал — реальной причины не знаю).

Naive · 27.07.2012, 12:48

Я говорил про неоправданную кроссбраузерность, включающую в себя поддержку ИЕ4 (упаси хоспаде), фф1, навигатора и конкъерора.
Даже для ИЕ6+ уже можно неопасаясь верстать православными слоями, а не таблицами

26.07.2012, 15:39	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Это делается атрибутом placeholder, а не лейблом. Alar, верни репу!

27.07.2012, 12:48	#10
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Я говорил про неоправданную кроссбраузерность, включающую в себя поддержку ИЕ4 (упаси хоспаде), фф1, навигатора и конкъерора. Даже для ИЕ6+ уже можно неопасаясь верстать православными слоями, а не таблицами Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Размещение по центру	Vitaliy>	HTML и CSS	3	16.07.2012 15:09
Выравнять текст на MsgBox	VistaSV30	Microsoft Office Access	1	25.12.2009 15:34
выравнивание по центру	ruavia3	Microsoft Office Access	5	03.12.2009 09:30
При расположении Label на компонентах, место под Label, не реагирует на событие onClick.	NavigatorNeba	Компоненты Delphi	3	15.11.2008 19:56
Вопрос по label. Как сделать так чтобы label была прозрачной.	Lonix	Компоненты Delphi	2	01.04.2007 06:23