2

垂直居中文本的典型解决方案是：

p {
    width: 10em;
    height: 2.4em;
    display: table-cell;
    vertical-align: middle;
}

效果是：

 _________________
|                 |
|                 |
| Line 1 of text  |
|                 |
|_________________|

 _________________
|                 |
| Line 1 of text  |
| Line 2 of text  |
| Line 3 of text  |
|_________________|

当我尝试隐藏太长而无法放入框中的文本时，此解决方案对我不起作用：

p {
    ...
    ...
    overflow: hidden;
}

由于某种原因，表格单元格会忽略溢出规则。

 _________________
| Line 1 of text  |
| Line 2 of text  |
| Line 3 of text  |
| Line 4 of text  |
| Line 5 of text  |
 -----------------
  Line 6 of text
  Line 7 of text

许多其他规则也停止工作，包括保证金。有没有其他方法可以在不破坏许多其他关键 CSS 规则的情况下垂直居中任意数量的文本行？

4

1 回答 1

0

现在有一个很好的解决方案，使用 flexbox 可以解决这个问题。我准备了一个代码片段：

div {
    width: 10em;
    height: 2.4em;
  
    display: flex;
    align-items: center;
    overflow: hidden;
  
    background: blue;
    color: white;
}
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>
      asjdg<br>
    </div>

    <br>

    <div>
      asjdg<br>
      asdsad<br>
      asdh<br>
      asdhsjkadh<br>
      asgdh<br>
      asdasd<br>
      asdasd<br>
    </div>
  </body>
</html>

于 2018-10-18T09:01:21.223 回答