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


请查看我在jsFdle: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相关问答推荐

Flex项目中的CSS宽度:100%有什么作用?

XPATH text()函数遇到困难

如何格式化HTML文本,使其环绕关键字

仅包含名为X的子元素的元素的XPath?

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

在CSS中旋转排除的蒙版图像

如何使用CSS在NSAttributedString中为HTML文本中的图像制作覆盖图

风格规则应该适用于响应图像的哪些方面?哪种规则适用于<;图片和gt;,哪种规则适用于<;img>;?

<nav和button是姐妹元素.当添加了导航活动类时,我如何为按钮编写CSS?

如何在网格中拥有离散的行

获取标准的Python脚本,以便使用FASK对网站进行Flask

与窗高匹配的响应式正方形网格

如何设计缠绕锚点元素的样式?

`table>;的消失;tbody:nth子级(1)`HTML

如何将图像放在其内部按钮下方

如何使用 HTML 将对象数组发送到 Nodejs Express

为 HTML5 文本字段设置最后六位正则表达式模式

不完整的悬停

如何使文本区域自动扩展到最大高度?

如何通过可见文本使用 Selenium 定位元素