Question

我想垂直对齐项目中的输入。我的代码适用于跨度，但不适用于输入！什么原因？

CSS代码：

.float  {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
div {
  display: table;
  border: solid 1px blue;  
  height: 120px;
}

HTML代码：

<div  class="col-sm-12 ">    
    <span class='float'>Float right</span>
</div>
<div  class="col-sm-12 ">     
    <input class='float' id='btnReport' name='btnReport'   type='button' value='report' />     
</div>

Answer 1

在这个问题中回答：

display:table-cell not working on an input element

＆＃34; CSS 2.1没有定义哪些属性适用于表单控件和框架，或如何使用CSS来设置它们的样式。用户代理可以申请这些元素的CSS属性。建议作者治疗这样的实验支持。未来的CSS级别可以指定这一点进一步＆＃34;

可能的解决方法可能是使用float类将输入包装在div中：

<div  class="col-sm-12 ">     
             <div class="float"><input id='btnReport' name='btnReport' type='button' value='report' />   
</div>

希望它有所帮助。

Answer 2

代码应该是

<div class="float"> <input id='btnReport' name='btnReport' type='button' value='report' /> </div>

您可以查看以下链接进行演示

jsfiddle

Answer 3

我认为vertical-align属性应用于元素内部的内容，而input元素没有任何内容。您可以使用dev标记包装input元素并将float类应用于它

使用bootstrap 3垂直对齐输入

3 个答案: