HTML - выравнивание переключателей и текста - PullRequest
Новая
       34

HTML - выравнивание переключателей и текста

3 голосов
/ 30 июня 2010

Скажем, у вас есть две простые ячейки таблицы рядом друг с другом.
Один содержит радио-кнопку и текст. Другой содержит только текст.

Размер переключателя установлен на 16x16 пикселей (не спрашивайте меня почему, предположите, что это просто так).
Размер шрифта составляет 12 пикселей.

Как сделать так, чтобы метки и переключатель включались во все основные браузеры вдоль (или достаточно близко) к вертикальной середине строки таблицы?

Пример HTML-кода для начала работы: 

<style type="text/css">
td {
  font-size: 12px;
  font-family: Verdana;
}

.radio {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0px;
}

.blah {
  text-decoration: line-through;
}
</style>

<table>
  <tr>
    <td>
      <input type="radio" class="radio" />
      <span class="blah">O</span>
    </td>
    <td>
      <span class="blah">O</span>
    </td>
  </tr>
</table>

В моих установленных версиях IE, Opera, Firefox и Chrome вышеприведенное выглядит как this

Результат, который я ожидаю увидеть, показан на этом изображении ... ... IE? Серьезно?

Остальные выглядят достаточно близко, но любые попытки выровнять текст приводили к тому, что он всегда выглядел ужасно как минимум в 2 из 4 браузеров.

Ответы [ 5 ]

2 голосов
/ 01 июля 2010

Googling "вертикальное выравнивание: середина" найдено это краткое объяснение Гэвина Кистнера, которое полезно. Я опробовал последнее предложение на этой странице, которое, похоже, выглядит достойно в Chrome, IE, Firefox, Opera и Safari.

Что я сделал, так это добавил td{ line-height:1.5em } - см. Ссылку для объяснения.

2 голосов
/ 01 июля 2010

Быстрое решение состоит в том, чтобы сделать font-size:12px; для td и width:16px;height:16px; для радио равными.

2 примера: 

td {
  font-size: 12px;
}
input[type=radio] {
  width: 12px; /* resize radio */
  height: 12px;
}

и 

td {
  font-size: 16px; /* resize font-size */
}
input[type=radio] {
  width: 16px;
  height: 16px;
}
1 голос
/ 01 июля 2010 
<td>
  <input type="radio" class="radio" />
</td>
<td>
  <span class="blah">O</span> <!-- text -->
</td>
<td>
  <span class="blah">O</span> <!-- text2 -->
</td>

Почему бы вам не поместить текст в отдельный столбец.

0 голосов
/ 01 июля 2010

Быстрые снимки в темноте:

  • Дать элементу радиовхода собственную ячейку таблицы? Тогда, по крайней мере, текст должен совпадать друг с другом.
  • Положить vertical-align:middle; на td вместо .radio? Могут по-прежнему вызывать проблемы, поскольку базовая линия текста в ячейке с элементом радиовхода все еще может определяться элементом ввода ...
0 голосов
/ 01 июля 2010

Один из способов сделать это - добавить вложенную таблицу в первую из двух ваших ячеек и поместить переключатель и первый диапазон в две ячейки (внутри вложенной таблицы) 

<table> 
  <tr> 
    <td> 
      <table><tr><td><input type="radio" class="radio" /></td>
      <td><span class="blah">O</span></td></tr></table>
    </td> 
    <td> 
      <span class="blah">O</span> 
    </td> 
  </tr> 
</table>
...