标题文本与背景图像的垂直居中（1或2行）

Question

JSFiddle Link

所以我有一组包含标题和链接列表的div。我希望标题与背景图像子弹垂直对齐。用一行文字看起来不错，但由于长度而包裹的标题会被推下来看起来很有趣。

如果有两行文字，我希望文本和背景图像在标题框中垂直对齐，以便它们与另一组标题一致。

<div class="calloutCollection tiled">
    <div class="linksCallout Main">
        <div class="title"> <a href="#">
                Heading List 1</a>
        </div>
        <div class="links"> <a href="#">Child Bullet Link 1</a>
        </div>
    </div>
    <div class="linksCallout Main">
        <div class="title"> <a href="#">
                Heading-List Wrapped Because of Word Count</a>
        </div>
        <div class="links"> <a href="#">Child Bullet Link 1</a>
 <a href="#">Child Bullet Link 2</a>
        </div>
    </div>
    <div class="linksCallout Main">
        <div class="title"> <a href="#">
                Heading List 3</a>
        </div>
        <div class="links"> <a href="#">Child Bullet Link 1</a>
        </div>
    </div>
    <div class="linksCallout Main">
        <div class="title"> <a href="#">
                Heading List 4</a>
        </div>
        <div class="links"> <a href="#">Child Bullet Link 1</a>
 <a href="#">Child Bullet Link 2</a>
        </div>
    </div>
</div>

对此有任何帮助将不胜感激。

Answer 1

只需从padding-top的CSS中移除.title属性，然后添加等于line-height: 48px;的{​​{1}}，使其垂直居中对齐。

对于height，请添加此CSS：

.title a

CSS：

display: inline-block;
vertical-align: middle;

DEMO