Html 跨距的垂直居中

所以我有这三列内容。我正在布局中使用

这是它通常（也应该）的样子：

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

以下是该位的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>

---

有办法吗？谢谢

好的，找到了答案，也要感谢欧米茄的帮助

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

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

---

谢谢你的帮助

设置

显示：表格单元格；文本对齐：居中至
。行
和
显示：块
到
.meta
和
span
元素，不要忘记定义
显示：块至
。
将您的css标记保留在那里，并进行更新和共享。
是否仅当
.fourcol.last
div或发生换行的任何div时才会发生这种情况？至于换行符（因为您似乎已经输入了工作代码），您是指和HTML换行符（即

），还是正常换行符（即
\n
）？此外，您的图像不会显示其显示的完整标题。它隐藏在下面的内容下面吗？这个部门的工资低吗？它完全消失了吗？虽然你已经添加了代码，但是很难为它找到一个测试环境。。。不管怎样，您是否尝试过添加空白：nowrap；指向标题？它至少应该把所有的事情都放在一条线上，并且是一个很好的起点。@Jon它发生在所有的街区上。没有换行。@Omega我会试试看。@Omega对meta应用
No wrap
只会重叠所有内容。如果将其应用于just
h2
，文本将变宽，基本上是“不换行”，但它仍然错误地放在底部。
.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*/