title: Center align span inside anchor tag
body: <pre><code>    &lt;div&gt;
          &lt;ul&gt;
              &lt;li class="dropdown"&gt;
               &lt;a href="link" class="col-xs-12"&gt;
                  &lt;span class="dropdown-toggle" data-toggle="dropdown"&gt;
                      &lt;span id="image" class="col-xs-3"&gt;&lt;img src="/home" width="100" height="100" /&gt;&lt;/span&gt;
                      &lt;span id="display_name" class="col-xs-6"&gt;  @Name &lt;/span&gt;
                      &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I need center span element which contains name is always align at middle of anchor tag. I don't want to set height and line height of the a tag. Because the name length may vary. so a tag height also will differs. Whatever the name entered I need to align it to center. How to achieve this ?</p>