如何在表格单元格中居中放置复选框？

100

该单元格仅包含一个复选框。由于表标题行中的文本，所以它很宽。如何将复选框居中（在HTML中包含内联CSS？（我知道））

我试过了 

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

但这没用。我究竟做错了什么？

更新：这是一个测试页。有人可以更正它吗（在HTML中使用CSS内联），以使复选框位于其列的中心？ 

<!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>
html  css 
— 毛格说恢复莫妮卡
source
<td align =“ center”> <input type =“ checkbox” name =“ myTextEditBox” value =“ checked”> </ td>将使其在IE8,9中工作。但是，在IE10或chrome中，无论您是否看到该复选框，复选框或单选框都是在框中定义的。该框将始终保持对齐状态。但是在定义框内，复选框或单选框居中。如果包含的TD的宽度为100px，则复选框为50px，则它始终保持对齐。要使复选框居中，可以将复选框的定义框设置为100px，这与包含的TD的宽度相同。
— qeq

Answers:

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

我希望这有帮助。

— 里斯托
source
2
+1谢谢，但是在我的示例中似乎不起作用。请查看更新的问题
— 毛夫说，请恢复莫妮卡（Monica）2011年
+1可行。我已经在上面发布了更新的代码-具有内联格式。现在，我只需要进行一些文件比较并找出使其起作用的区别。，谢谢
— Mawg说，请恢复Monica 2011年
接近，但在我的bootstrap-4桌子上似乎略有偏离。列标题肯定居中，但复选框稍微
— 偏中
27

尝试

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
— 安德鲁·马歇尔
source
+1谢谢，但是在我的示例中似乎不起作用。请查看更新的问题
— 毛夫说，请恢复莫妮卡（Monica）2011年
1
我刚刚使用Chrome 9中的解决方案测试了更新后的代码，并且可以正常工作。
— 安德鲁·马歇尔
+1如果它适用于MS IE和FireFox，并且您在此处发布了代码，那么答案就是您的。
— Mawg说恢复Monica 2011年
23

试试这个，这应该工作，

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

这应该工作，我正在使用它：

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— 米洛什
source
1
@Gerard，谁在这里谈论HTML5？
— 米洛什
5

动态编写td元素，而不直接依赖于td样式

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— 卡洛斯E
source
也许是<span>而不是<div>？
— Mawg说要
1
div是一个块元素；其默认显示值为“阻止”。随着跨度，输入继续在左侧。测试以查看差异
— 卡洛斯E
一个很好的解释，这将在将来对其他人有所帮助（+1）欢迎登机
— Mawg说恢复Monica的时间为
4

拉出所有内联CSS，然后将其移到头部。然后在单元格上使用类，以便您可以随意调整所有内容（不要使用“ center”之类的名称-您可以将其更改为从现在起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>
— 道森
source
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>每一行的第一行。

— 里克·史密斯
source
1

将check元素的float属性定义为none：

float: none;

并将父元素居中：

text-align: center;

这是唯一对我有用的。

— 普拉斯托尼科
source
继承的“ 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>
展开摘要

— 谢尔盖
source
-2

确保您<td>不是display: block;

浮动会做到这一点，但更容易做到： display: inline;

— Askrich
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.