如何在表格单元格中垂直居中？

Question

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

截图：

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！

Answer 1

问题..

复选框元素与其他输入元素一样，取决于特定于供应商的appearance样式 - 您可以使用appearance:none或-webkit-appearance:none等来覆盖此元素。然后，这将停止复选框完全渲染。

因此，你必须“活着”。在某种程度上使用默认样式并实现一些覆盖，对于您给出的示例中的垂直对齐，您必须将其提升到“＃”;通过1px，例如：

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

Demo Fiddle

More on appearance from MDN

  

-moz-appearance [sic] CSS属性用于Gecko（Firefox）   使用基于平台的本机样式显示元素   操作系统的主题。

---

设置自己的复选框

解决方法是“替换”＆＃39;完全复选框元素，同时仍保留其功能 - 这可以通过添加label元素然后应用som nifty CSS来完成，例如，下面的内容：

Demo Fiddle

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;
}

Answer 2

将display: block;添加到输入将关闭垂直间距。否则，它将被视为内联项。

Fiddle

Answer 3

在输入容器上使用vertical-align：middle，而不是在输入标签本身上

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

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

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

Answer 4

我不确定下一个结果是否是你想要的。我只评论了两条规则。

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

结果是一个居中的框。