How to center a checkbox in a table cell?

后端未结

关注

 10  1318

The cell contains nothing but a checkbox. It is rather wide because of text in the table header row. How do I center the checkbox (with inline CSS in my HTML? (I know))

相关标签:

10条回答

说谎

2020-12-05 04:04

Pull out ALL of your in-line CSS, and move it to the head. Then use classes on the cells so you can adjust everything as you like (don't use a name like "center" - you may change it to left 6 months from now...). The alignment answer is still the same - apply it to the <td> NOT the checkbox (that would just center your check :-) )

Using you code...

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

0 讨论(0)

星月不相逢

2020-12-05 04:07

UPDATE

How about this... http://jsfiddle.net/gSaPb/

Check out my example on 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;   
}

I hope this helps.

0 讨论(0)

[愿得一人]

2020-12-05 04:08

Make sure that your <td> is not display: block;

Floating will do this, but much easier to just: display: inline;

0 讨论(0)
发布评论:

提交评论
- 加载中...
名媛妹妹

2020-12-05 04:12
Try this, this should work,
```
td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
离开以前

2020-12-05 04:12
For dynamic writing td elements and not rely directly on the td Style
```
  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

自闭症患者

2020-12-05 04:16

Try

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>

0 讨论(0)

1 2 下一页