Как центрировать флажок в ячейке таблицы?

100

В ячейке нет ничего, кроме флажка. Он довольно широкий из-за текста в строке заголовка таблицы. Как мне центрировать флажок (со встроенным 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>
Мэг просит восстановить Монику
источник
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "checked"> </td> заставит его работать в IE8,9. Однако в IE10 или Chrome флажок или переключатель определяется в поле, независимо от того, видите вы это поле или нет. Поле всегда будет выровнено по левому краю. Но внутри определяющего поля находится флажок или радио. Если ширина содержащего TD составляет 100 пикселей, флажок установлен в 50 пикселей, тогда он всегда выравнивается по левому краю. Чтобы центрировать флажок, вы можете сделать определяющее поле флажка размером 100 пикселей, что соответствует ширине содержащего TD.
qeq

Ответы:

111

ОБНОВИТЬ

Как насчет этого ... http://jsfiddle.net/gSaPb/


Посмотрите мой пример на jsFiddle: http://jsfiddle.net/QzPGu/

HTML

<table>
  <tr>
    <td>
      <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
    </td>
  </tr>
</table>

CSS

td {
  text-align: center; /* center checkbox horizontally */
  vertical-align: middle; /* center checkbox vertically */
}
table {
  border: 1px solid;
  width: 200px;
}
tr {
  height: 80px;   
}

Надеюсь, это поможет.

Христо
источник
2
+1 Спасибо, но в моем примере это не работает. См. Обновленный вопрос
Мэг просит восстановить Монику на работе
+1 Это работает. Я разместил обновленный код - со встроенным форматированием - выше. Теперь мне просто нужно сравнить файлы и выяснить, в чем разница, благодаря которой он работает. Спасибо,
говорит Мэг, восстановить Монику на работе
Близко, но выглядит немного не так с моей таблицей bootstrap-4. Заголовок столбца определенно центрирован, но флажок находится немного левее центра
Эддисон Клинке
27

Пытаться

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
Эндрю Маршалл
источник
+1 Спасибо, но в моем примере это не работает. См. Обновленный вопрос
Мэг просит восстановить Монику на работе
1
Я только что протестировал ваш обновленный код, используя свое решение в Chrome 9, и он работает.
Эндрю Маршалл
+1 Если он работает в MS IE и FireFox и вы размещаете здесь код, то ответ за вами.
Mawg говорит восстановить Монику
23

Попробуйте это, это должно сработать,

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
Прабхакаран С.
источник
10

Это должно работать, я использую его:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
Милош
источник
1
@ Джерард, кто здесь говорит о HTML5?
Милош
5

Для динамического написания элементов td и не полагаться непосредственно на стиль td

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
Карлос Э
источник
Может быть, скорее <span>, чем <div>?
Mawg требует восстановить Монику
1
div - это блок-элемент; его отображаемое значение по умолчанию - «блок». В случае диапазона ввод продолжается слева. Тест, чтобы увидеть разницу
Карлос Э
Хорошее объяснение, которое поможет другим в будущем (+1) Добро пожаловать на борт
Mawg говорит восстановить Монику
4

Вытащите ВСЕ свой встроенный CSS и переместите его в заголовок. Затем используйте классы для ячеек, чтобы вы могли настроить все по своему усмотрению (не используйте имя типа «центр» - вы можете изменить его на левое через 6 месяцев ...). Ответ на выравнивание все тот же - примените его к <td>флажку НЕ (это просто центрирует ваш чек :-))

Используя ваш код ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
<style>
table { margin:10px auto; border-collapse:collapse; border:1px solid gray; }
td,th { border:1px solid gray; text-align:left; padding:20px; }
td.opt1 { text-align:center; vertical-align:middle; }
td.opt2 { text-align:right; }
</style>
</head>
<body>

<table>

      <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
      </tr>
      <tr>
        <td class="opt1"><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 class="opt2">
          <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>
      </tr>
    </table>
    </body>
    </html>
Доусон
источник
2
Не забывайте ... a td- это «особый» элемент. У него есть свои уникальные особенности - как блокировка и встроенный брак (из ада).
Доусон
3

Если вы не поддерживаете устаревшие браузеры, я бы использовал, flexboxпотому что он хорошо поддерживается и просто решит большинство ваших проблем с макетом.

#table-id td:nth-child(1) { 
    /* nth-child(1) is the first column, change to fit your needs */
    display: flex;
    justify-content: center;
}

Это центрирует весь контент в начале <td>каждой строки.

Рик Смит
источник
1

Задайте для свойства float элемента проверки значение none:

float: none;

И центрируем родительский элемент:

text-align: center;

Это единственное, что у меня работает.

Plastónico
источник
Унаследованный тип float: left; разрушал это для меня. Установка "float: none" исправила это.
jornhd
0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th class="text-center">Left</th>
      <th class="text-center">Center</th>
      <th class="text-center">Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <span>Bootstrap (class="text-left")</span>
      </th>
      <td class="text-left">
        <input type="checkbox" />
      </td>
      <td class="text-center">
        <input type="checkbox" checked />
      </td>
      <td class="text-right">
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <th>
        <span>HTML attribute (align="left")</span>
      </th>
      <td align="left">
        <input type="checkbox" />
      </td>
      <td align="center">
        <input type="checkbox" checked />
      </td>
      <td align="right">
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

Сергей
источник
-2

Убедитесь, что вы <td>неdisplay: block;

Плавающий сделает это, но гораздо проще: display: inline;

Аскрич
источник