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

感谢您的帮助！

Answer 2

您应该将display: table-cell; text-align: center;设置为.row，将display: block;设置为.meta，并设置为span元素，并且不要忘记定义display: block;到<a>元素。如果这不起作用，请添加完整的CSS或添加 this 等小提琴。将css标记保存在那里并进行更新和共享。

垂直居中跨度

2 个答案: