В ячейке нет ничего, кроме флажка. Он довольно широкий из-за текста в строке заголовка таблицы. Как мне центрировать флажок (со встроенным CSS в моем HTML? (Я знаю))
Я попытался
<td>
<input type="checkbox" name="myTextEditBox" value="checked"
style="margin-left:auto; margin-right:auto;">
</td>
но это не сработало. Что я делаю не так?
Обновление: вот тестовая страница. Может ли кто-нибудь исправить это - с помощью CSS, встроенного в HTML, - чтобы флажки были сосредоточены в своих столбцах?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
</head>
<body>
<table style="empty-cells:hide; margin-left:auto; margin-right:auto;" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
</tr>
<tr>
<td>
<input type="checkbox" name="query_myTextEditBox" style="text-align:center; vertical-align: middle;">
</td>
<td>
myTextEditBox
</td>
<td>
<select size ="1" name="myTextEditBox_compare_operator">
<option value="=">equals</option>
<option value="<>">does not equal</option>
</select>
</td>
<td>
<input type="text" name="myTextEditBox_compare_value">
</td>
<td>
<input type="checkbox" name="report_myTextEditBox" value="checked" style="text-align:center; vertical-align: middle;">
</td>
</tr>
</table>
</body>
</html>
Я принял ответ @Hristo - и вот он со встроенным форматированием ...
<table style="empty-cells:hide;" border="1" cellpadding="1" cellspacing="1">
<tr>
<th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
</tr>
<tr>
<td style="text-align: center; vertical-align: middle;">
<input type="checkbox" name="query_myTextEditBox">
</td>
<td>
myTextEditBox
</td>
<td>
<select size ="1" name="myTextEditBox_compare_operator">
<option value="=">equals</option>
<option value="<>">does not equal</option>
</select>
</td>
<td>
<input type="text" name="myTextEditBox_compare_value">
</td>
<td style="text-align: center; vertical-align: middle;">
<input type="checkbox" name="report_myTextEditBox" value="checked">
</td>
</tr>
</table>
Ответы:
ОБНОВИТЬ
Как насчет этого ... http://jsfiddle.net/gSaPb/
Посмотрите мой пример на jsFiddle: http://jsfiddle.net/QzPGu/
HTML
CSS
Надеюсь, это поможет.
источник
Пытаться
источник
Попробуйте это, это должно сработать,
источник
Это должно работать, я использую его:
источник
Для динамического написания элементов td и не полагаться непосредственно на стиль td
источник
Вытащите ВСЕ свой встроенный CSS и переместите его в заголовок. Затем используйте классы для ячеек, чтобы вы могли настроить все по своему усмотрению (не используйте имя типа «центр» - вы можете изменить его на левое через 6 месяцев ...). Ответ на выравнивание все тот же - примените его к
<td>
флажку НЕ (это просто центрирует ваш чек :-))Используя ваш код ...
источник
td
- это «особый» элемент. У него есть свои уникальные особенности - как блокировка и встроенный брак (из ада).Если вы не поддерживаете устаревшие браузеры, я бы использовал,
flexbox
потому что он хорошо поддерживается и просто решит большинство ваших проблем с макетом.Это центрирует весь контент в начале
<td>
каждой строки.источник
Задайте для свойства float элемента проверки значение none:
И центрируем родительский элемент:
Это единственное, что у меня работает.
источник
источник
Убедитесь, что вы
<td>
неdisplay: block;
Плавающий сделает это, но гораздо проще:
display: inline;
источник