html 单元格复选框,html – 如何在表格单元格中垂直居中复选框？

问题..

与其他输入元素一样,复选框元素受制于供应商特定的外观样式 – 您可以使用外观：none或-webkit-appearance：none等来覆盖它.然后,这将使复选框完全停止渲染.

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

.category-item .input-container input {

margin:-1px 0 1px 0; /*

padding: 0;

vertical-align: middle;

}

Demo Fiddle

More on appearance from MDN

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.

设置自己的复选框样式

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

Demo Fiddle

HTML

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;

}