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

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 上下文）。

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

Inline list item box shifts up when it contains breaking words

html

css

html-lists