html - 内联列表项框在包含中断词时向上移动

Question

正如您在图片中看到的，Reference Check 正在向上移动，因为 Reference Check 标签已损坏。

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

向 CSS 添加 vertical-align:middle(或所需值):

.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/

附言希望它能与 bootstrap CSS 一起工作(不确定整个 CSS 上下文)。