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!
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/