html - 垂直居中跨度

Question

所以我有这三栏内容。我在布局中使用 The 1140 Grid。

这就是它通常（并且应该）的样子：

但是当标题变成多行时，它是这样的：

这是该位的 HTML 代码：

<div id="sub-hero" class="container">
    <div class="row">
        <div class="post fourcol">
            <a href="">
                <div class="thumb"><img src="http://lorempixel.com/380/160" alt="Placeholder"></div>
                <div class="meta">
                <span>
                    <h2>Making Sense Of This</h2>
                    <em class="byline">By Name Author</em>
                </span>
                </div>  
            </a>
        </div>
        <div class="post fourcol">
            <a href="">
                <div class="thumb"><img src="http://lorempixel.com/380/160" alt="Placeholder"></div>
                <div class="meta">
                <span>
                    <h2>How To Not Train A Megatron-sized Dragon</h2>
                    <em class="byline">By Name Author</em>
                </span>
                </div>          
            </a>

        </div>
        <div class="post fourcol last">
            <a href="">
                <div class="thumb"><img src="http://lorempixel.com/380/160" alt="Placeholder"></div>
                <div class="meta">
                <span>
                    <h2>Sample Post With A Super Long Headline</h2>
                    <em class="byline">By Name Author</em>
                </span>
                </div>              
            </a>
        </div>
    </div>
</div>

这是相应的CSS代码：

.container#sub-hero .post .meta span { 
    display: inline-block; 
    margin-top: 0.5em; 
    vertical-align: middle; 
}

.container#sub-hero .post .meta { 
    color: #fff; 
    padding: 0.7em 1em 1em 1em; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    z-index: 2; 
}

有什么修复吗？谢谢！

Answer 1

好的，想通了，也感谢欧米茄的帮助。

这是我添加到代码中的内容：

.container#sub-hero .post .meta { 
    white-space:nowrap; /*expands the whole thing*/
    width: 100%; 
}

.container#sub-hero .post .meta span { width: inherit; } /*adjusts the byline, at least, to fit inside the box width and not overflow*/
.container#sub-hero .post .meta h2 { white-space:normal; } /*to reset the h2 to its normal fling*/

谢谢你的帮助！

Answer 2

您应该设置display: table-cell; text-align: center;to.row和display: block;to.meta以及 to spanelement 并且不要忘记定义display: block;to <a>element。如果这不起作用，请添加您的完整 CSS 或像这样添加小提琴。将您的 css 标签保留在那里并更新和分享。