CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
mjyazdani
mjyazdani

Reputation: 2035

vertically align an input using bootstrap 3

I want to vertically align an input in my project. My code works for a span but don't work for input! whats the reason?

JSFiddle

CSS code:

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

HTML Code:

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

Upvotes: 0

Views: 119

Answers (3)

rawel
rawel

Reputation: 3033

I think verticle-align property applied to content inside the element, and input element doesnt have any. You can wrap input element with dev tag and apply float class to it

Upvotes: 0

Prashant Tapase
Prashant Tapase

Reputation: 2147

code should be

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

you can check below link for demo

jsfiddle

Upvotes: 1

Mario Bellart
Mario Bellart

Reputation: 504

As answered in this question:

display:table-cell not working on an input element

"CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further."

A possible workaround might be to wrap the input in a div with the float class:

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

Hope it helps.

Upvotes: 1

Related Questions