首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使复选框在表格单元格中居中?

如何使复选框在表格单元格中居中?
EN

Stack Overflow用户
提问于 2011-02-19 10:38:56
回答 10查看 315.9K关注 0票数 114

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

我试过了

代码语言:javascript
复制
 <td>
      <input type="checkbox" name="myTextEditBox" value="checked" 
      style="margin-left:auto; margin-right:auto;">
 </td>

但这并不管用。我做错了什么?

更新:这是一个测试页面。有没有人能改正一下--在HTML中使用CSS内联--这样复选框就会在它们的列中居中显示?

代码语言:javascript
复制
<!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的答案--这里是内联格式...

代码语言:javascript
复制
<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>
EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2011-02-19 11:18:04

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

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

代码语言:javascript
复制
td {
  text-align: center;
  /* center checkbox horizontally */
  vertical-align: middle;
  /* center checkbox vertically */
}

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

tr {
  height: 80px;
}
代码语言:javascript
复制
<table>
  <tr>
    <td>
      <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
    </td>
  </tr>
</table>

票数 122
EN

Stack Overflow用户

发布于 2011-02-19 10:43:34

试一试

代码语言:javascript
复制
<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
票数 31
EN

Stack Overflow用户

发布于 2013-11-18 15:23:33

试试这个,这个应该行得通,

代码语言:javascript
复制
td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
票数 24
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5048485

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档