html - 如何使表格单元格中的复选框居中?

标签 html css

单元格只包含一个复选框。由于表格标题行中的文本,它相当宽。如何使复选框居中(在我的 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>

最佳答案

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


查看我在 jsFiddle 上的示例:http://jsfiddle.net/QzPGu .代码片段:

td {
  text-align: center;
  /* center checkbox horizontally */
  vertical-align: middle;
  /* center checkbox vertically */
}

table {
  border: 1px solid;
  width: 200px;
}

tr {
  height: 80px;
}
<table>
  <tr>
    <td>
      <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
    </td>
  </tr>
</table>

关于html - 如何使表格单元格中的复选框居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5048485/

相关文章:

html - 导航未在 iPad 上显示

html - 为什么此CSS动画无法在IOS上运行?

css - Twitter Bootstrap 和谷歌地图

css - 在 vmin 单元中设置的边框导致间隙

html - 在更宽的屏幕上在 flexbox 中移动线性渐变

html - CSS Flex 布局未根据需要对齐元素

javascript - 将参数传递给 JavaScript 函数

html - 如何将 2 个或更多 div 在同一行上居中? (CSS)

javascript - 如何在滚动时弹起动画?

html - CSS % 宽度相加未达到 100%,差异似乎与字体大小成比例