内联列表项框在包含断字时向上移动

Question

正如您在图像中看到的那样，参考检查正在向上移动，因为参考检查标签正在破碎。

CSS

  .candidate-listing-sources {
         display: inline-block;
         border: 1px solid grey;
         width: 100px;
         height: 75px;
         padding-top: 5px;
         margin-right: 2px;
     }

HTML我使用的是Angular JS

<ul>
    <li class="candidate-listing-sources text-center"
        ng-repeat="source in candidateListingSources" 
        ng-click="loadCandidateListing(source.type)">
        <span>{{::source.label}}</span><br />
        <img ng-if="source.count === null" 
             ng-src="{{iconsUrl + '/loading.gif'}}" />
        <span ng-if="source.count !== null" class="badge">{{source.count}}</span>
    </li>
</ul>

在空白测试页中完成呈现的HTML

        <style type="text/css">
            .candidate-listing-sources {
                display: inline-block;
                border: 1px solid grey;
                width: 100px;
                height: 75px;
                padding-top: 5px;
                margin-right: 2px;
            }
        </style>
        <ul>
            <li class="candidate-listing-sources text-center">
                <span>Sourced</span><br>
                <span class="badge">0</span>
            </li>
            <li class="candidate-listing-sources text-center">
                <span>Breaking Words </span><br>
                <span class="badge">0</span>
            </li>
            <li class="candidate-listing-sources text-center">
                <span>OneWord</span><br>
                <span class="badge">0</span>
            </li>
        </ul>

Answer 1

将vertical-align:middle（或所需的值）添加到CSS：

.candidate-listing-sources {
                display: inline-block;
                border: 1px solid grey;
                width: 100px;
                height: 75px;
                padding-top: 5px;
                margin-right: 2px;
       vertical-align:middle;
            }

演示：http://jsfiddle.net/gane8foL/

P.S。希望它能与bootstrap CSS一起使用（不确定整个CSS上下文）。