Question

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

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/

有没有人有任何想法？

Answer 1

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

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

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

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

垂直居中溢出的文本

1 个答案: