html - スパンの垂直方向のセンタリング

Question

だから私はこれらの3列のコンテンツを持っています。レイアウトで1140グリッドを使用しています。

これは通常（そしてそうあるべきです）のように見えます：

しかし、見出しが複数行になると、次のようになります。

そのビットの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

要素に、および要素に設定する必要がdisplay: table-cell; text-align: center;あります。要素に定義することを忘れないでください。これが機能しない場合は、完全なcssを追加するか、このようにフィドルを追加してください。そこにcssタグを保持し、更新して共有します。.rowdisplay: block;.metaspandisplay: block;<a>

Answer 2

さて、オメガの助けのおかげで、それを理解しました。

これが私がコードに追加したものです：

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

ご協力いただきありがとうございます！