在引导布局中垂直对齐文本

Question

为了在我的代码中垂直对齐文本，我在google/stackoverflow等方面尝试了许多不同的方法，但是我很难做到这一点。

我的代码是一个表单，用户可以用‘厄运名称’写，文字出现在图片上。

我只是试着垂直对齐输入到图片上的文本，这样一旦打印出来，它就会在现实生活中出现。

我已经尝试了所有的方法，但这是我的第一个网站，这个疑难解答在我之上。

这是给你的酒。http://www.bootply.com/NQWhZArz7D

非常感谢

(不要担心任何响应性的问题

编辑:必须与能够输入多行文本兼容

Answer 1

您可以使用与高度相同的line-height来解决这个问题。

试着：-

   .centering{
     line-height:324px;
   }

演示

如果它是一行文本，如果文本足够长，那么行高将适用于每一行，因此根据您的要求选择此方法。

另一种方法是使用display:table和display:table-cell，这将尊重垂直对齐。

例：-

<div class="col-xs-12 table">
    <p class="centering text-center">Toaster Apocalypse</p>
</div>

和

.table {
  display:table;
}

.centering{ /* or use a meaningfule rule like .table .table-cell*/
   display:table-cell;
   width:100%;
}

并给它的父容器display:table

演示

看看一些这里的定心技术