html - 垂直居中跨度

Question

所以我有这三栏内容。我正在使用 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

好吧，想通了，也多亏了Omega的帮助。

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

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

感谢您的帮助!