title: Can't get my column vertically aligned in row
body: <p>I would want to vertically align that col-md-3 div in the row. I tried the majority of the solutions found on stackoverflow. Can you help me ? I have this code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content-wrap-optin{
   background-color: #1ED037;
   padding: 0 0;
   height: 220px;
  }
  
  
  .optin-text-row{
   display: table;
  }
  
  .optin-text-col{
   vertical-align: middle;
   display: table-cell;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content-wrap content-wrap-optin"&gt;
      &lt;div class="container clearfix"&gt;
          &lt;div class="row clearfix optin-text-row"&gt; 
  
              &lt;!-- Call to action --&gt;
              &lt;div class="col-md-3 optin-text-col"&gt;
                  &lt;p class="optin-text"&gt;Descarca Gratuit 7 carti marca Zig Zag prin Romania si descopera valorile autentice romanesti!&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- row --&gt;
      &lt;/div&gt;&lt;!-- container clearfix --&gt;
  &lt;/div&gt;&lt;!-- content-wrap --&gt;  </code></pre>
  </div>
  </div>
  </p>