Question

我用HTML5和CSS3创建了一个特色块。该块包含background-image和一些文本标题。你可以在这里看到它：http://codepen.io/anon/pen/yNWxBb

正如您所看到的，我现在正在使用margin-top将文本居中放置在块的垂直中间。并利用pseudo-class ::after在background-image上方添加透明黑色叠加层。

我知道您可以使用table与table-cell和vertical-align: middle一起垂直对齐div，但不会弄乱我的标记。

有谁知道如何解决这个问题？这是正确的标记吗？或者，您是否应该建议使用其他标记和方式将透明背景添加到图像中？

请您回答/建议。

提前谢谢。

Answer 1

解决问题的两种可能方法：

http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

是的，您可能想要更改标记以使其成为可能，但是我指的是两篇文章都带有示例代码。

Answer 2

我相信这是你的解决方案。只需在你的CSS中替换这个类，我猜它会正常工作。

.features figcaption header {
    position: absolute;
    top: 50%;                       
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    line-height: 34px;
    color: #FFF;
    //position: absolute;
    //top: 28%;
}

垂直居中内容，包括透明覆盖

2 个答案: