Question

我需要在div中水平和垂直地应用一些文本，这对于已经在堆栈溢出之前发布的解决方案工作正常 -

text-align: center;
vertical-align: middle;
line-height: 90px;   

/* the same as your div height */

我的问题是我有多行，我用 -

将这些单词包装到一个新行

white-space: normal;

我的文本在一个按钮内，所以我需要这一行来抵消不允许文本正常包装的btn类。

然而，当我这样做时，现在我的90px线之间会有很大的差距，正如你所期望的那样。有办法解决这个问题吗？或者以我的文字为中心的另一种方式？

Answer 1

Sans flexbox方法：

给你的容器元素一个等于它已知高度的行高，然后给一个包含文本的子元素，行高为1（或任何可取的）。确保将孩子设置为display: inline-block

div { height: 250px; line-height: 250px; border: 1px solid #000;}
span { line-height:1; display: inline-block;}

<div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at efficitur nulla. Suspendisse potenti. Ut viverra velit in lobortis euismod. Mauris cursus mollis porta. Praesent ullamcorper imperdiet placerat. Nam sit amet aliquam leo. Ut a facilisis ex, ut fermentum felis</span>
</div>

Answer 2

CSS表工作得很好

＆＃13;

stdout

＆＃13;

div {
  height: 250px;
  border: 1px solid #000;
  display: table;
}
p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

＆＃13;

Answer 3

使用flexbox：

<div id="container">
<div class="content">Multi line content centered both vertically and horizontally. You can use block elements & images too.</div>
</div>

Css很简单：

#container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 90px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

更多信息：text-to-path method

CSS中心文本在多行上

3 个答案: