title: Create img with vertical align middle in column of row in Bootstrap
body: <p><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>body {
   font-family: 'Ubuntu', sans-serif;
   background: #0d0d0d;
  }
  body a {
   color: #fff;
  }
  body a:hover {
   color: #fff;
  }
  @media (min-width: 1500px) {
   .container{
    width: 1470px !important;
   }
  }
  nav {
   background: #1c1c1c !important;
   margin-bottom: 50px;
  }
  .toper {
   padding: 100px;
   background: #071931;
   color: #fff;
  }
  .main {
   background: #121212;
   border-radius: 2px;
   margin-top: -60px;
   color: #fff;
   padding: 15px 15px;
  }
  .container-first {
   background: #2a2a2a;
   margin: 0px 0px 15px 0px;
   padding: 5px;
  }
  .breadcrumb {
   margin: 0px;
   background: #2a2a2a;
  }
  .container-first-right {
   padding-top: 2px;
  }
  @media screen and (max-width: 768px)
  {
   .container-first-right {
    float: none !important;
   }
  }
  .welcome {
   background: #444;
   border-radius: 3px;
   padding: 0px !important;
   margin-bottom: 15px;
  }
  .welcome-header
  {
   padding: 15px 20px 15px 20px;
   background: #2d2d2d;
   border-radius: 3px;
   margin: 10px;
   box-shadow: inset 0px 0px 15px 0px #000;
  }
  .welcome-text
  {
   padding: 10px;
   margin: 10px;
   color: #ccc;
  }
  .welcome-action {
   padding: 15px 0px 15px 20px;
   background: #4d4d4d;
   color: #ccc;
   letter-spacing: 5px;
   border-radius: 3px;
  }
  .bluer {
   padding: 15px;
   background: #046092;
   border-radius: 3px;
   font-weight: 500;
  }
  .section-bluer
  {
   padding: 0px;
   margin-top: 15px;
  }
  .section-first
  {
   background: #1c1c1c;
   margin: 0px;
   padding: 10px;
  }
  .section-picture
  {
   padding: 5px;
   height: 100%;
   text-align: center;
  }
  .section-picture &gt; img
  {
   border: 1px solid #016d9b;
   vertical-align: middle;
  }
  .section-this p
  {
   color: #ccc;
   font-size: 12px;
  }
  .section-this h4 a
  {
   color: #87b8d7;
   font-weight: 500;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pl"&gt;
   &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta charset="utf-8"&gt;&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
    &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
    &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500" rel="stylesheet"&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;main class="container main"&gt;
     &lt;div class="container-fluid bluer"&gt;
      &lt;a href="#"&gt;Najnowszy news: #98 Tygodnik MPC News - O grach MMORPG słów kilka!&lt;/a&gt;
     &lt;/div&gt;
  &lt;div clas="container-fluid row"&gt;
      &lt;div class="col-sm-8 section-bluer"&gt;
       &lt;div class="bluer"&gt;
        Projekty MPCforum.pl
       &lt;/div&gt;
       &lt;div class="row section-first"&gt;
        &lt;div class="col-sm-1 section-picture"&gt;
         &lt;img src="fb.png" /&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-8 section-this"&gt;
         &lt;h4&gt;&lt;a href="#"&gt;League of Legends&lt;/a&gt;&lt;/h4&gt;
         &lt;p&gt;Ćwicz swój refleks, opanuj percepcję i zostań przywódcą grupy! Stań się prawdziwym bohaterem świata League of Legends i doskonal swoje umiejętności taktyczne.&lt;/p&gt;
         &lt;hr&gt;
         &lt;a href="#"&gt;Metin2 - Publikacje Serwerów, &lt;/a&gt;&lt;a href="#"&gt;Metin2 - Publikacje Serwerów, &lt;/a&gt;&lt;a href="#"&gt;Metin2 - Publikacje Serwerów, &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-3 section-last-post"&gt;
         asdasd
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4"&gt;
       
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt;
    &lt;/main&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/H6YgK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H6YgK.png" alt="enter image description here"></a></p>
  
  <p>And as you can see I want this image to have vertical align middle.</p>
  
  <p>I tried to add it with css, tried setting this column height not 100% but 100px or more. Make this img display inline-block etc....</p>
  
  <p>And nothing works good. And have no Idea what to do now with it and make this works.</p>