1

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!

bopjesvla
  • 755
  • 4
  • 15
  • 22
  • why dont you use divs ? it is not why inline are for ! – Royi Namir Feb 03 '12 at 15:21
  • Because their width is the width of the content and it works without specifying the width. But please tell me your solution! – bopjesvla Feb 03 '12 at 15:27
  • 2
    You are going about this the wrong way. You are mixing up the purpose of these elements. You are trying to make `inline` elements `block` elements. You shouldn't be asking people to fix this without changing your HTML, you should be fixing your HTML. To achive what you are trying to do you should be placing your content in `

    ` tags and then wrapping the content in `span` tags. Is there a reason you cannot change the HTML?

     – My Head Hurts Feb 03 '12 at 16:14

4 Answers4

3

In your markup, if the span are on different rows you could add on the parent container:

white-space: pre-line;

With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.

pre-line - This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes, and at new lines in the markup (or at occurrences of "\a" in generated content). In other words, it’s like normal except that it’ll honor explicit line breaks.

You can find more informations here about white-space:

For an IE7 compatibility, you could also add on the parent container:

*white-space: pre /*FixIE7*/;
Etienne
  • 2,257
  • 3
  • 27
  • 41
1

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/

srijan
  • 1,504
  • 1
  • 13
  • 24
0

I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!

If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?

div.class:after {
  content:"\a";
  white-space: pre;
}

break :after trick: https://stackoverflow.com/a/10934138/6586407

Community
  • 1
  • 1
ztrat4dkyle
  • 1,652
  • 2
  • 13
  • 13
0

If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:

span {
    float: left;
    clear: left;
    color: #FFF;
    padding: 30px;
}

display: block; will not work because it requires you to set a width (or else they'll fill the available space).

display: inline-block; will not work because still display on the same line.

random_user_name
  • 25,694
  • 7
  • 76
  • 115