Як центрувати прапорець у комірці таблиці?

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>

Я прийняв відповідь @ Христо - і ось це з вбудованим форматуванням ...

<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>

html css

— Мауг каже відновити Моніку
джерело

<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "check"> </td> змусить його працювати в IE8,9. Однак у IE10 або chrome, прапорець або радіобокс визначені у вікні, незалежно від того, бачите ви це чи ні. Поле завжди залишатиметься вирівняним. Але всередині вікна визначення розміщено прапорець або радіо. Якщо ширина TD, що містить 100px, прапорця 50px, вона завжди залишається вирівняною. Щоб централізувати прапорець, ви можете визначити, що визначальне поле чекбокса має розмір 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 Дякую, але це, здається, не працює в моєму прикладі. Будь ласка, дивіться оновлене запитання

— Mawg каже, що поверніть Моніку

+1 Це працює. Я опублікував оновлений код - з вбудованим форматуванням - вище. Тепер мені просто потрібно зробити порівняння файлів і визначити різницю, яка змушує його працювати. Дякую

— Мавг каже, що відновити Моніку

Близько, але, здається, трохи відключилося від мого столу bootstrap-4. Заголовок стовпця, безумовно, по центру, але прапорець трохи лівий від центру

— Аддісон Клінке

27

Спробуйте

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>

— Ендрю Маршалл
джерело

+1 Дякую, але це, здається, не працює в моєму прикладі. Будь ласка, дивіться оновлене запитання

— Mawg каже, що поверніть Моніку

1

Я щойно перевірив ваш оновлений код, використовуючи моє рішення в Chrome 9, і воно працює.

— Ендрю Маршалл

+1 Якщо це працює в MS IE та FireFox і ви розміщуєте код тут, то відповідь за вами.

— Мауг каже, що повернемо Моніку

23

Спробуйте, це має працювати,

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}

— Prabhakaran S
джерело

10

Це має працювати, я його використовую:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>

— Мілош
джерело

1

@Gerard, хто тут говорить про HTML5?

— Мілош

5

Для динамічного запису елементів td, а не покладайтесь безпосередньо на стиль td

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>

— Карлос Е
джерело

Може, скоріше <span> ніж <div>?

— Мауг каже, що повернемо Моніку

1

div - блок-елемент; його значення за замовчуванням - "блок". З прольотом введення продовжується зліва. Тест, щоб побачити різницю

— Carlos E

Гарне пояснення, яке допоможе іншим у майбутньому (+1) Ласкаво просимо на борт

— Мауг каже, що повернемо Моніку

4

Вийміть ВСЕ зі свого прямого CSS та перемістіть його до голови. Потім використовуйте класи на клітинках, щоб ви могли налаштувати все як завгодно (не використовуйте ім’я типу "центр" - ви можете змінити його на 6 місяців зліва ...). Відповідь вирівнювання залишається однаковою - застосуйте її до <td>прапорця NOT (це просто центрирує ваш чек :-))

Використання коду ...

<!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;

— аскріч
джерело