动态高度包装器中垂直居中的文本答案

【问题标题】：Vertically centered text in a dynamic height wrapper动态高度包装器中垂直居中的文本
【发布时间】：2017-12-09 00:37:58
【问题描述】：

我通常只使用 line-height 进行垂直居中，但在这种情况下，我正在处理的布局有点棘手。

我已经把这个 jsfiddle 放在一起来展示我到目前为止的位置。所有的 CSS hacks 都建议为此使用表格单元格技巧，但如果包装器具有绝对高度，我只能让它工作，所以对我来说，这个文本不是垂直居中的：

<div class="wrap">
    <a href="#">
        <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
        <span class="text"><span>Text that might span multiple lines</span></span>
    </a>
</div>

https://jsfiddle.net/fdtbvmcw/

我基本上需要的是文本，无论它跨越多少行，都位于图像的中间。图片不能是背景图片，我不能将固定的宽度或高度附加到包装器上。

包装器正在模拟更大页面模板中的响应列，我需要图像来保留您看到的该列的全宽。如果需要，可以在列中添加其他 HTML。

想法？

【问题讨论】：

标签： html css vertical-alignment vertical-text

【解决方案1】：

Flexbox 可以做到这一点...

.wrap {
  height: auto;
  position: relative;
  width: 50%;
}

.wrap a img {
  height: auto;
  width: 100%;
}

.wrap a span.text {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrap a span.text span {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.25
}

<div class="wrap">
  <a href="#">
    <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
    <span class="text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id praesentium nihil iure amet dolore nulla totam modi </span></span>
  </a>
</div>

【讨论】：

【解决方案2】：

我也会使用 flex 作为您的解决方案。

.wrap a .text {
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top:0;
  display: flex; 
  display: -webkit-box;    
  display: -moz-box;       
  display: -ms-flexbox;    
  display: -webkit-flex;    
  justify-content: center;
  align-items: center;
}

【讨论】：

【解决方案3】：

我认为使用 translateY 更好，它适用于更多设备

//CSS
.wrap {
  height: auto;
  position: relative;
  width: 50%;
}

.wrap a img {
  height: auto;
  width: 100%;
}

.wrap span {
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  line-height: 30px;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);  
  display:block;
  position:absolute;
  text-align:center;
}

//HTML
<div class="wrap">
<a href="#">
  <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />
  <span>Text that might span multiple lines</span>
</a>
</div>

https://jsfiddle.net/MAXXALANDER/fdtbvmcw/2/

【讨论】：