如何在表格单元格中垂直放置复选框？ [英] How to center checkbox vertically in a table-cell?

问题描述

问：如何垂直放置复选框？在这种特殊情况下，为什么在所有元素的边框和填充都为0的情况下，复选框边框和包含元素之间有空格？

Q: How do I center the checkbox vertically? In this particular case, why is there empty space between checkbox borders and the containing element at all given that margin and padding are 0 for all elements?

屏幕截图：

JSFiddle： http://jsfiddle.net/TZMF5/2/

JSFiddle: http://jsfiddle.net/TZMF5/2/

HTML：

<div class="category-item">
    <span class="input-container">
        <input type="checkbox"/>
     </span>
</div>

CSS：

.category-item {
  display: table;
  border: 1px solid #cccccc;
  margin: 0;
  padding: 0;
}

.category-item .input-container {
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
}

.category-item .input-container input {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

这里有类似的问题。找不到对这种情况有效的答案。 Thx！

There are similar questions on SO to this. Couldn't find an answer that would work for this case. Thx!

推荐答案

问题..

复选框元素其他输入元素受制于供应商特定外观样式 - 您可以使用 appearance：none 或 -webkit-appearance：none etc..how这将会停止复选框的渲染。

The issue..

Checkbox elements, like other input elements are subject to vendor specific appearance styling- you can override this by using appearance:none or -webkit-appearance:none etc..however this will then stop the checkbox from rendering at all.

必须在一定程度上生存默认样式，并实现一些覆盖，对于您给出的示例中的垂直对齐，您必须将其碰撞1px，例如：

As such, you have to 'live' with the default styling to some extent and implement a few overrides, for vertical alignment in the example you have given, you have to 'bump it up' by 1px, eg:

.category-item .input-container input {
    margin:-1px 0 1px 0; /* <-- here */
    padding: 0;
    vertical-align: middle;
}

演示小提琴

更多关于来自MDN的外观

-moz-appearance [sic] CSS属性在Gecko（Firefox）中用于
使用基于平台原生样式的元素
操作系统的主题。

The -moz-appearance [sic] CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme.

---

一个解决方法是完全替换复选框元素，同时保留其功能 - 这可以通过添加一个标签元素，然后应用有限的CSS，例如，如下：

---

Styling your own checkbox

A workaround is to 'replace' the checkbox element entirely, whilst still retaining its functionality- this can be done by adding a label element then applying som nifty CSS, for example, the below:

HTML

<div class="category-item">
    <div class="input-container">
        <input class='checkbox' id='checkbox' type="checkbox" />
        <label for='checkbox' class='checkbox'></label>
    </div>
</div>

CSS

.category-item {
    display: table;
    border: 1px solid #cccccc;
    margin: 0;
    padding: 0;
    height:30px;
}
.category-item .input-container {
    display: table-cell;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    height:30px;
}
label.checkbox {
    position:relative;
    vertical-align: middle;
    border:1px solid black;
    height:10px;
    width:10px;
    margin:0;
    padding:0;
    margin:-2px 0 2px 0;
    line-height:1em;
    padding:0;
    overflow:hidden;
    display:inline-block;
}
input.checkbox {
    appearance:none;
    height:0;
    width:0;
    overflow:hidden;
    display:none;
    margin:0;
    padding:0;
    -webkit-appearance:none;
}

input.checkbox:checked +label.checkbox:before {
    content:'\2713';
    position:absolute;
    top:-3px;
    font-size:10px;
    left:2px;
}

这篇关于如何在表格单元格中垂直放置复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！