Question

我在google / stackoverflow等上尝试了很多不同的方法，以便在我的代码中垂直对齐文本，但是我遇到了很多困难。

我的代码是一个表单，用户可以在其中写下“厄运”的名称＆＃39;和文字出现在图片上。

我只是试图垂直对齐输入到图片上的文字，使其看起来像现实生活中出现的那样。

我已经尝试了所有方法，但这是我的第一个网站，这个故障排除在我之上。

这是一个适合你的蠢货。 http://www.bootply.com/NQWhZArz7D

非常感谢

（不要担心任何响应性问题，这些问题都会在我的代码中排序）

编辑：必须兼容能够输入多行文字

Answer 1

您可以使用line-height与高度

相同来解决此问题

尝试： -

   .centering{
     line-height:324px;
   }

<强> Demo

如果它是单行文本，这将正常工作，如果文本足够长以使其包装，那么行高将应用于每一行，因此根据您的要求选择此方法。

另一种方法是使用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

<强> Demo