相同的源代码，没有区别，但垂直对齐只适用于jsfiddle。请帮我回答。这是HTML源代码，它不能在Chrome上工作:
<html>
<head>
<title>Demo</title>
<style>
.checkboxOfField
{
display: inline-block;
width: 100%;
background-color: red;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<span class="checkboxOfField">
<input style="text-align: center; vertical-align: middle" type="checkbox" />
</span>
</body>
</html>
这是jsfiddle link: http://jsfiddle.net/UghzT/它适用于Chrome。谢谢。
可能是因为Quirksmode?
添加Doctype!
为什么要添加样式到input ?它什么也没做。input具有type="checkbox"属性。因此，text-align:center;有点奇怪，因为里面永远不会有文本。甚至vertical-align属性也不属于这里。复选框内没有任何东西要对齐…
你的CSS代码将在中间对齐span中的所有内容。检查这个jsFiddle。我删除了' style '属性，它仍然可以很好地工作。