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

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

html css

Html 如何在表格单元格中居中放置复选框？,html,css,Html,Css,该单元格只包含一个复选框。它相当宽，因为表格标题行中有文本。如何将复选框居中（在HTML中使用内联CSS？（我知道））我试过了 <td> <input type="checkbox" name="myTextEditBox" value="checked" style="margin-left:auto; margin-right:auto;"> </td> 但那没用。我做错了什么更新：这里有一个测试页面。有人能用HT

该单元格只包含一个复选框。它相当宽，因为表格标题行中有文本。如何将复选框居中（在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>


校准试验
搜索？字段搜索标准是否包含在报告中？

myTextEditBox
等于
不等于

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


搜索？字段搜索标准是否包含在报告中？

myTextEditBox
等于
不等于

试试看

这个怎么样

查看我在JSFIDLE上的示例：。代码段：

td{
文本对齐：居中；
/*水平居中复选框*/
垂直对齐：中间对齐；
/*垂直居中复选框*/
}
桌子{
边框：1px实心；
宽度：200px；
}
tr{
高度：80px；
}


复选框

拉出所有内嵌CSS，并将其移到头部。然后在单元格上使用类，以便您可以根据需要调整所有内容（不要使用“中心”这样的名称-您可以在6个月后将其更改为左…）。对齐答案仍然相同-将其应用于
而不是复选框（这将使您的复选框居中：-））
使用您的代码

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

校准试验表{边距：10px自动；边框折叠：折叠；边框：1px实心灰色；} td，th{边框：1px纯灰色；文本对齐：左侧；填充：20px；} td.opt1{文本对齐：中间；垂直对齐：中间；} td.opt2{文本对齐：右；} 搜索？字段搜索标准是否包含在报告中？ myTextEditBox 等于不等于
这应该行得通，我正在使用它：

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

试试这个，应该可以

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

确保您的
不是
显示：块浮动可以做到这一点，但要简单得多：display:inline 将check元素的float属性定义为none： float: none; 并将父元素居中放置： text-align: center; 这是唯一对我有效的方法。如果您不支持传统浏览器，我会使用它，因为它可以解决大多数布局问题 #table-id td:nth-child(1) { /* nth-child(1) is the first column, change to fit your needs */ display: flex; justify-content: center; } 这将所有内容集中在每行的第一个中。用于动态编写td元素，而不是直接依赖td样式 <td> <div style="text-align: center;"> <input type="checkbox"> </div> </td> 左边居中赖特引导（class=“text left”） HTML属性（align=“left”）我的问题是，有一个父样式带有位置：绝对！重要信息，我不允许编辑它所以我给了我的特定复选框位置：relative！重要信息，它解决了垂直偏差问题。 +1谢谢，但在我的示例中似乎不起作用。请看更新的问题我刚刚用我的Chrome 9解决方案测试了你的更新代码，它可以工作。+1如果它在MS IE和FireFox中工作，你在这里发布代码，那么答案就是你的。+1谢谢，但在我的示例中似乎不起作用。请参阅更新后的问题+1。我已经在上面发布了更新的代码，带有内联格式。现在我只需要做一些文件比较，找出使它工作的差异，谢谢，但是我的bootstrap-4表似乎有点不对劲。列标题肯定居中，但复选框在中心偏左一点。别忘了，td是一种“特殊”元素。它有它自己独特的行为-像一个区块和在线婚姻（来自地狱）。@Gerard，谁在这里谈论HTML5？将使其在IE8,9中工作。但是，在IE10或chrome中，复选框或radiobox是在一个框中定义的，无论您是否看到该框。长方体将始终左对齐。但在定义框内，复选框或单选框居中。如果包含TD的宽度为100px，则复选框为50px，则它始终左对齐。要使复选框居中，可以将复选框的定义框设为100px，这与包含的TD的宽度相同。可能不是？div而是块元素；其默认显示值为“块”。使用span时，输入将在左侧继续。一个好的解释，这将在将来帮助其他人（+1）欢迎aboardAn继承的“float:left；”毁了我的生活。设置“float:none”将其修复。 <td> <div style="text-align: center;"> <input type="checkbox"> </div> </td>