使用 'display:table' 和 'masonry' 时无法使元素 100% 高度

Question

我正在使用砌体来显示图像。我希望文本出现在每张图片的中间，为此我将父项显示为 table，将子项显示为 table-cell。我无法将父包装器设置为 100% 高度。

<div class="grid">
 <div class="grid-sizer"></div>
 <div class="grid-item">
  <div class="wrapper">
   <div class="title">
    <h1>Title Here</h1>
   </div>
  </div>
 <img src="any-image.jpg"/>
</div>

.grid-sizer, .grid-item {
   width: 33.333%;
 }
.grid-item {
   float: left;
   overflow:hidden;
   position:relative;
 }
.wrapper {
   display:table;
   position:absolute;
   text-align:center;
   width:100%;
   height:100%;
   top:0;
   bottom:0;
   left:0;
   right:0;
 }
.title {
   display: table-cell;
   vertical-align: middle;
   width:100%;
   height:100%;
 }
.grid-item img {
   display: block;
 }

我也明白，如果我定义 .grid-item 的高度，文本将居中，但这会随着视口大小而变化，因此我无法定义单一大小。

如果有帮助，这里是fiddle：https://jsfiddle.net/j32921b9/

感谢您的帮助。

Answer 1

我可能会建议您另一种方法，不使用表格。将绝对位置添加到您的文本包装器并像这样对其进行转换：

.title {
   display: inline-block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color:#fff;
 }

这里updated fiddle.

使用 'display:table' 和 'masonry' 时无法使元素 100% 高度

Can't make element 100% height when using 'display:table' and 'masonry'

css

height

masonry