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，并提出了建议。然而，虽然这些方法（特别是表格显示版本）允许垂直对齐，但我仍然无法实现同时对中和固定高度。

以下是我所描述的方案的 demo ，以下是此演示中产生此问题的CSS。
注意当您取消注释设置display: inline-block的行时，如何在演示中，顶部div缩小到正确的高度（并且与第二个div的大小完全匹配）。

.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

请尝试以下操作： 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 2

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

而不是使用

.outer-div, span {...}

仅使用

.outer-div {...}

对于跨度，以下规则将起作用

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

你完成了。这是你的工作小提琴

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

Answer 3

如果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%);
}

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

3 个答案: