Center align span inside anchor tag

    <div>
        <ul>
            <li class="dropdown">
             <a href="link" class="col-xs-12">
                <span class="dropdown-toggle" data-toggle="dropdown">
                    <span id="image" class="col-xs-3"><img src="/home" width="100" height="100" /></span>
                    <span id="display_name" class="col-xs-6">  @Name </span>
                    <span class="caret"></span>
                </span>
              </a>
            </li>
        </ul>
    </div>

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 ?