如何将复选框居中?

The cell contains nothing but a checkbox. It is rather wide because of text in the table header row. How do I center the checkbox (with inline CSS in my HTML? (I know))

单元格只包含一个复选框。由于表头行中的文本，它相当宽。如何将复选框居中(在HTML中使用内联CSS) ?(我知道)

I tried

我试着

 <td>
      <input type="checkbox" name="myTextEditBox" value="checked" 
      style="margin-left:auto; margin-right:auto;">
 </td>

but that didn't work. What am I doing wrong?

但这并不工作。我做错了什么?

Update: here's a test page. Can someone please correct it - with CSS inline in the HTML - so that the checkboxes are centered in their columns?

更新:这是一个测试页面。有人能纠正它- 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>

I have accepted @Hristo's answer - and here it is with inline formatting ...

我接受了@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>

9 个解决方案

#1

UPDATE

更新

How about this... http://jsfiddle.net/gSaPb/

这个怎么样…http://jsfiddle.net/gSaPb/

Check out my example on jsFiddle: http://jsfiddle.net/QzPGu/

看看我在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;   
}

I hope this helps.

我希望这可以帮助。

#2

Try

试一试

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

#3

Try this, this should work,

试试这个，应该没问题，

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

#4

This should work, I am using it:

这应该有用，我正在使用它:

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

#5

Pull out ALL of your in-line CSS, and move it to the head. Then use classes on the cells so you can adjust everything as you like (don't use a name like "center" - you may change it to left 6 months from now...). The alignment answer is still the same - apply it to the <td> NOT the checkbox (that would just center your check :-) )

取出所有的内嵌CSS，并将其移动到头部。然后在单元格上使用类，这样您就可以随心所欲地调整所有内容(不要使用“center”这样的名称——您可以从现在起6个月后将其更改为left…)。对齐结果仍然是一样的——将它应用到而不是复选框(这只会将您的复选框居中:-)

Using you code...

使用你的代码…

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

#6

If you don't support legacy browsers, I'd use flexbox because it's well supported and will simply solve most of your layout problems.

如果您不支持遗留浏览器，我将使用flexbox，因为它得到了很好的支持，并且可以简单地解决大多数布局问题。

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

This centers all content in the first <td> of every row.

这将所有内容集中在每一行的第一个中。

#7

For dynamic writing td elements and not rely directly on the td Style

对于动态编写td元素，不直接依赖td风格

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

#8

Define the float property of the check element to none:

将check元素的浮动属性定义为none:

float: none;

And center the parent element:

并将父元素居中:

text-align: center;

It was the only that works for me.

这是唯一适合我的。

#9

Make sure that your <td> is not display: block;

确保您的没有显示:block;

Floating will do this, but much easier to just: display: inline;

浮动将会这样做，但更容易:显示:内联;

#1