Search code examples
htmlcsscentering

Vertically centering overflowed text

I have horizontally centered some overflowed text (actually I found this on stack overflow). I'm trying to vertically center it to no avail.

The HTML:

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

Here's the 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;
}

I have an adapted fiddle here: http://jsfiddle.net/HfT72/

Does anyone have any thoughts?

Solution

  • Working JSFiddle, though I don't know if this solution is useful to you.

    I set the #inner wrapper to top: 50%; as well as setting position:relative for the #text, then displacing it by top:-8px(half of the font height of 16px).

    There might be a better solution, but vertical centering has rarely a clean solution.

    Edit: Updated JSFiddle showing the difference between my solution and the above one. Resize the preview window to see what I mean.