Question

我正在使用砖石来显示图像。我希望文本出现在每个图像的中间，为此我已经显示父表作为表，子表示为表单元格。我不能让父包装器达到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的高度，文本将居中，但这会随着视口大小而变化，因此我无法定义单个大小。

如果它有帮助，这是一个小提琴：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％

1 个答案: