CSS在不展开div的情况下垂直对齐文本
我试图在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中，实现多行文本垂直对中的最佳方法是什么？
回答 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;
}你就完蛋了。这是你工作的小提琴
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%);
}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;
}https://stackoverflow.com/questions/35568898
复制相似问题
文本在div中间不垂直对齐。
CSS -垂直对齐div中的文本
在div内与CSS垂直对齐文本
CSS : div顶部的垂直对齐文本
DIV中不垂直对齐的文本
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
