使用引导程序3垂直对齐输入

Question

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

的jsfiddle

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在输入元素上不起作用

“ CSS 2.1没有定义哪些属性适用于表单控件和框架，也没有定义如何使用CSS设置样式。用户代理可以将CSS属性应用于这些元素。建议作者将此类支持视为实验性的。CSS的未来级别可以进一步指定。”

可能的解决方法可能是使用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

我认为verticle-align属性应用于元素内部的内容，而input元素没有任何内容。 您可以使用dev标签包装输入元素，并对其应用float类