垂直居中溢出的文本答案

【问题标题】：Vertically centering overflowed text垂直居中溢出的文本
【发布时间】：2014-05-10 01:13:20
【问题描述】：

我将一些溢出的文本水平居中（实际上我是在堆栈溢出时发现的）。我试图将其垂直居中无济于事。

HTML：

<div id="outer"><div id="inner"><div id="text">some text that will overflow</div></div></div>

这是 CSS：

#outer {
  display: block;
  position: relative;
  left: 100px;
  width: 100px;
  border: 1px solid black;
  background-color: silver;
  height: 150px;
}

#inner {
  /* shrink-to-fit width */
  display: inline-block;
  position: relative;
  /* shift left edge of text to center */
  left: 50%;
}

#text {
  /* shift left edge of text half distance to left */
  margin-left: -50%;
  /* text should all be on one line */
  white-space: nowrap;
}

我在这里有一个改编的小提琴： http://jsfiddle.net/HfT72/

有人有什么想法吗？

【问题讨论】：

标签： html css centering

【解决方案1】：

Working JSFiddle，虽然我不知道这个解决方案是否对你有用。

我将#inner wrapper 设置为top: 50%;，并为#text 设置position:relative，然后将其替换为top:-8px（16px 字体高度的一半）。

可能有更好的解决方案，但垂直居中很少有干净的解决方案。

编辑：Updated JSFiddle 显示了我的解决方案与上述解决方案之间的区别。调整预览窗口的大小以了解我的意思。

【讨论】：