Re:Web Starter Kit
by mindhunter on Thursday June 19, 2014 @05:38PM
(#7918448)
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)
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.
Re:Web Starter Kit
by protonfish on Thursday June 19, 2014 @05:09PM
(#7918324)
#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.
This requires #vertalign to have fixed height. You cannot have variable height (based on its own content) and also be vertical align.
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;
.. 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 :-)
I assume that only work with single line text?
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.
We already have one.
Re:Web Starter Kit
by tothepixel on Thursday June 19, 2014 @05:05PM
(#7918303)
Except in IE.
Re:Web Starter Kit
by magicalist on Thursday June 19, 2014 @06:40PM
(#7918680)
Flexbox is in IE11, and a slightly older version of the spec is in IE10 (with a "ms" prefix).
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.