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

клетка не содержит ничего, кроме флажка. Он достаточно широк из-за текста в строке заголовка таблицы. Как мне центрировать флажок (с помощью встроенного CSS в моем HTML? (Я знаю))



пробовал 



 <td>

      <input type="checkbox" name="myTextEditBox" value="checked" 

      style="margin-left:auto; margin-right:auto;">

 </td>


но это не сработало. Что я делаю не так?




обновление: вот тестовая страница. Может ли кто - нибудь исправить это - с помощью CSS inline в 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>
490   9  

9 ответов:

обновление

Как насчет этого... 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;   
}

Я надеюсь, что это помогает.

94  
2015-07-28 19:32:18

попробовать

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
25  
2011-02-19 04:43:34

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

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
13  
2013-11-18 09:23:32

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

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
7  
2018-04-25 14:53:57

вытащите все ваши встроенные 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>
4  
2011-02-19 07:30:21

Если вы не поддерживаете устаревшие браузеры, я бы использовал 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> в каждой строке.

3  
2016-04-01 21:00:55

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

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
2  
2017-08-31 21:27:24

определите свойство float элемента check для none:

float: none;

и центр родительского элемента:

text-align: center;

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

1  
2014-10-15 12:35:08

убедитесь, что ваш <td> не display: block;

плавучие будет делать это, но гораздо проще просто: display: inline;

-1  
2014-09-22 17:54:54

Comments

    Ничего не найдено.
Click here to cancel reply.