6 ms·

> After a little practice, it can even get easy. Just googling for "vertical align text css" should be enough to tell you that different layout is needed. Why

by dminor 12y ago

> After a little practice, it can even get easy. Just googling for "vertical align text css" should be enough to tell you that different layout is needed. Why shouldn't there be a layout model that makes it easy to do the things people are trying to do? The idea that we shouldn't even attempt to create a better one is silly.

skybrian 12y ago
The question is whether you start over or make incremental improvements. Supporting a new layout doesn't seem like the kind of change that's worth starting over for. That said, I'm all for experimenting.
just2n 12y ago
We already have one. http://jsfiddle.net/gJP9k/ http://jsfiddle.net/gJP9k/
- tothepixel 12y ago
  Except in IE.
  - magicalist 12y ago
    Flexbox is in IE11, and a slightly older version of the spec is in IE10 (with a "ms" prefix).
protonfish 12y ago
#vertalign {height: 50%; position: absolute; top: 25%; } There you go. That CSS is useful for popup dialogs. Though most of the difficulties I see with vertical-alignment are due to poor design and implementation. HTML and CSS get new features all the time so clearly nobody is saying they shouldn't improve. It's people saying that "HTML is inherently broken so there should be something else but they don't know what" that I am getting sick of.
- joesb 12y ago
  This requires #vertalign to have fixed height. You cannot have variable height (based on its own content) and also be vertical align.
x0054 12y ago
I know your pain, vertically aligning anything in CSS is quite annoying, unless you have a fixed width outer container. That being said, that's a problem with CSS implementation as it pertains to this one particular problem. The fix isn't to chuck CSS and HTML, but to keep improving it.
iLoch 12y ago
I think the problem comes from a lack of understand of the complexity of such a task. Vertical align text according to what? The easiest way to vertical align text is exactly how you'd expect it to be, and it solves the problem perfectly. If you want to align text vertically, you just do font-size: 20px; line-height: 40px; vertical-align: middle; What's the problem?
- joesb 12y ago
  I assume that only work with single line text?
- bybjorn 12y ago
  .. and then, when the content is wrapped over two lines you get a line-height that you set just to vertical align the text. Perfect? No :-)
mindhunter 12y ago
CSS3's flex attribute solves that. It's the holy grail for modern web-interface-development. Vertical center text: .vertical-text { display: flex; flex-direction: column; justify-content: center; } (add ´align-items: center´for horizontal center)

by dminor 12y ago

skybrian 12y ago

The question is whether you start over or make incremental improvements. Supporting a new layout doesn't seem like the kind of change that's worth starting over for. That said, I'm all for experimenting.

just2n 12y ago

We already have one. http://jsfiddle.net/gJP9k/ http://jsfiddle.net/gJP9k/

tothepixel 12y ago
Except in IE.
- magicalist 12y ago
  Flexbox is in IE11, and a slightly older version of the spec is in IE10 (with a "ms" prefix).

protonfish 12y ago

#vertalign {height: 50%; position: absolute; top: 25%; } There you go. That CSS is useful for popup dialogs. Though most of the difficulties I see with vertical-alignment are due to poor design and implementation. HTML and CSS get new features all the time so clearly nobody is saying they shouldn't improve. It's people saying that "HTML is inherently broken so there should be something else but they don't know what" that I am getting sick of.

joesb 12y ago
This requires #vertalign to have fixed height. You cannot have variable height (based on its own content) and also be vertical align.

x0054 12y ago

I know your pain, vertically aligning anything in CSS is quite annoying, unless you have a fixed width outer container. That being said, that's a problem with CSS implementation as it pertains to this one particular problem. The fix isn't to chuck CSS and HTML, but to keep improving it.

iLoch 12y ago

I think the problem comes from a lack of understand of the complexity of such a task. Vertical align text according to what? The easiest way to vertical align text is exactly how you'd expect it to be, and it solves the problem perfectly. If you want to align text vertically, you just do font-size: 20px; line-height: 40px; vertical-align: middle; What's the problem?

joesb 12y ago
I assume that only work with single line text?
bybjorn 12y ago
.. and then, when the content is wrapped over two lines you get a line-height that you set just to vertical align the text. Perfect? No :-)

mindhunter 12y ago

CSS3's flex attribute solves that. It's the holy grail for modern web-interface-development. Vertical center text: .vertical-text { display: flex; flex-direction: column; justify-content: center; } (add ´align-items: center´for horizontal center)