Search code examples
cssinlinecenteralignment

display: inline, but on different lines

Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:

text-align: center

But inline elements stay on the same line. Is it possible to align them vertically?

Fiddle: http://jsfiddle.net/_bop/NhVaF/ Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show

Please don't:

  • Change the HTML in the example. Change the CSS!
  • Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.

Thanks in advance!

Solution

  • You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.

    http://jsfiddle.net/NhVaF/5/