问CSS在不展开div的情况下垂直对齐文本
EN

Stack Overflow用户

提问于 2016-02-22 20:34:12

回答 3查看 1.2K关注 0票数 1

我试图在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。然而，一旦我这样做，文本不再是垂直中心，而是顶部对齐。

我读过这个职位的文章，并对它的建议进行了反复的讨论。然而，尽管这些方法(特别是表显示版本)确实允许垂直对齐，但我仍然不能同时实现对中和固定高度。

下面是我描述的场景的演示，下面是这个示例中的CSS，它造成了这个问题。

Note如何在演示中取消设置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中，实现多行文本垂直对中的最佳方法是什么？

html

css

overflow

centering

display

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-02-22 20:58:56

你需要在两个地方做些改变。

而不是使用

.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/

票数 1

Stack Overflow用户

发布于 2016-02-22 20:39:17

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

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

无论如何，这比使用表格要好得多。

如果我想在div中对任何内容进行居中，您可以使用CSS transform属性。

这可以用于全屏等，而且非常方便：

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

票数 1

Stack Overflow用户

发布于 2016-02-22 20:40:52

尝试像这样：演示

.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。

最新演示

.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;    
}