title: vertical aling in bootstrap
body: <p>helllo evryone.</p>
  
  <p>i have 4 divs that i want to be in one line in bootstrap but i have some problems with alignement, this picture shows the result:
  <a href="https://i.stack.imgur.com/ruX3Q.png" rel="nofollow noreferrer">It is looking like this now</a> </p>
  
  <p>the image is not in one line as other element and the text x cm is not in the center of its div</p>
  
  <p>this my code
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flt{
      float: left
  }
  .info-ingr{
      background-color: #5bc0de;
      margin-left: 40px;
      height: 34px;
      color: white;
  }
  
  .alginement{
      height: 100px;
      width: 100%;
      background-color: #faa;
      display: inline-block;
      vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="painchamp0" class="collapse"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-10 col-sm-10 col-md-2 "&gt;
                      &lt;img src="https://thumbs.dreamstime.com/x/long-loaf-bread-22826883.jpg" class="img-responsive"&gt;&lt;!--"img/pain-sandwich"--&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"&gt;
                      &lt;select class="ste form-control" id="painList0"&gt;
                          &lt;option&gt;Select type de pain :&lt;/option&gt;
                          &lt;option&gt;Pain complet&lt;/option&gt;
                          &lt;option&gt;Pain aux céréales&lt;/option&gt;
                          &lt;option&gt;Pain au seigle&lt;/option&gt;
                          &lt;option&gt;Pain au levain&lt;/option&gt;
                          &lt;option&gt;Pain aux épices&lt;/option&gt;
                          &lt;option&gt;Pain aux figues&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-3 col-sm-3 col-md-1 col-lg-1" &gt;
                      &lt;input type="number" step="8" value="0" min="0" max="64" placeholder="largeur de pain :" id="painQuantite0"  class="form-control flt"&gt; 
                  
                  &lt;/div &gt;
                   &lt;div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 align-lg-middle alginement" &gt;
                       x cm
                   &lt;/div&gt;   
                  &lt;div  class="col-xs-1 col-sm-1 col-md-1 col-lg-1"&gt;
                      
                      &lt;button id="painBTN0" type="button" class="btn btn-info btn-md flt"&gt;
                      ok
                      &lt;/button&gt;
  
                  &lt;/div&gt;
                  
              &lt;/div&gt;
          &lt;/div&gt;
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>thank you</p>