CSS 垂直居中文本而不扩展 div

Question

我试图在 div 内将换行成多行的文本垂直居中，同时不允许 div 根据它显示的文本量重新调整大小包含。任何不适合指定高度和宽度的文本都应被截断（最好使用省略号）。

文本需要位于一个 span 元素中，该元素层叠在两个 div 中。

<div class="outer-div">
  <div class="inner-div">
    <span class="course-name">Text Here</span>
  </div>
</div>

我遇到的问题是，为了让 div 不垂直调整大小以适合文本，我必须将 display 设置为 inline-block。但是，一旦我这样做，文本就不再垂直居中，而是顶部对齐。

我已通读 this post，并尝试了它的建议。然而，尽管这些方法（特别是 table 显示版本）确实允许垂直对齐，但我仍然无法同时实现居中和固定高度。

这是我正在描述的场景的 demo，下面是造成此问题的演示中的 CSS。
注意在演示中，当您取消注释设置 display: inline-block 的行时，顶部 div 会缩小到适当的高度（并且与第二个 [= 的大小完全匹配=40=]).

.outer-div, span {
  width: 120px;
  height: 45px;
}

.outer-div {
  text-align: center;
  display: table;
  background-color: blue;
  color: white;
}

.inner-div {
  display: table-cell;
  vertical-align: middle;
}

span {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;

  /* The line in question */
  display: inline-block;
}

在固定高度和宽度的 div 中实现多行文本垂直居中的最佳方法是什么？

Answer 1

您可以将 div 内文本的行高设置为与只有一行的文本的高度相同。

.some-class{
   height: 45px;
   line-height: 45px;
}

个人认为这比使用表格要好。

如果我想在 div 中居中任何内容，您可以使用 CSS 变换属性。

这个可以用来全屏等，非常好用。:

.outer-div{
  position: relative;
}

.inner-div{
  position: absolute;
  top: 50%;
  left: 50%:
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

Answer 2

这样试试：Demo

.inner-div {
  display: table-row; /* changed table-cell to row */
  vertical-align: middle;
}

span {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
   display: table-cell;   /* added table-cell instead of inline-block */
   vertical-align:middle; 
}

或者你可以简单地使用 line-height 如果有单行文本并赋值 vertical align 到 middle

Updated Demo

.outer-div {
  width: 120px;
  overflow: hidden;      
  background-color: blue;
  color: white;
  height: 45px;      
}

.inner-div {
  display: table;
  text-align: center;
  width: 120px;
}

span {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: table-cell;
  vertical-align: middle;
  height: 45px;    
}

Answer 3

您需要在两个地方进行更改。

而不是使用

.outer-div, span {...}

仅使用

.outer-div {...}

对于跨度，以下规则有效

span {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 120px;
  display: inline-block;
  max-height: 45px;
}

大功告成。这是你的作品 fiddle

https://jsfiddle.net/logiccanvas/y6cpmgdg/1/

CSS 垂直居中文本而不扩展 div

CSS vertically centering text without expanding div

html

css

overflow

centering

display