how to center align the label for form
<p>I am using my own classes and tags for HTML and CSS forms. I want to align the label text in middle. </p>

<p>I tried to use it using line height but it get messier when the text length is heavy. </p>

<p>and is it possible to use <code>vertical align: middle;</code> Because that's not even working</p>

<p>HTML :</p>

<pre><code>&lt;div class="type-details"&gt;
     &lt;div class="col-xs-12 no-padding text-group"&gt;
          &lt;span class="col-md-4 no-padding form-label"&gt;Placeholder:&lt;/span&gt;
          &lt;div class="col-md-7 no-padding"&gt;
               &lt;input class="form-text" type="text"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS: </p>

<pre><code>.type-details {
    border-bottom: 1px solid #e9eef0;
    padding: 20px;
    width: 60%;
    float: left;
}
.form-label {
    float: left;
    min-width: 17px;
    font-size: 11px;
    text-transform: uppercase;
    color: #62696d;
    margin-right: 15px;
}
.no-padding {
    padding: 0px;
}
input.form-text {
    background: #fff;
    border: 1px solid #dae2e6;
    font-size: 12px;
    color: #62696d;
    padding: 6px 8px;
    box-shadow: none;
    border-radius: 0;
    line-height: normal;
    display: inline-block;
    width: 100%;
    margin-bottom: 0px;
}
</code></pre>

<p>Check this fiddle <a href="https://jsfiddle.net/kuascjpo/2/" rel="nofollow">https://jsfiddle.net/kuascjpo/2/</a> I want to align the span="form-label" vertically center</p>