Ems are supported in some parts of the interface, and not others. Many people who use them simply resign themselves to the Extended interface to enter them in a meaningful manner.
Walter
On May 25, 2015, at 9:10 PM, JDW email@hidden wrote:
Walter, this is the first time I’ve really played with “em” padding. As such, it’s certainly MUCH easier to fiddle with it in jsfiddle than to accomplish it in Freeway. In Freeway with my gray box selected, if I open the Inspector and access Padding in the “Dimensions” section, I can type “2em” (and other em values) without problem. But if I click the Padding popup, choose Custom, then try to type different em values for Top/Btm versus Left/Right, Freeway converts them to px! Is that a limitation of em? Or is it a Freeway imposed limitation? If Freeway, is this imposed for a reason or is the functionality “just not there”?
Well, I’ve spent hours fiddling with this (I kid you not) and have come to the conclusion that I still like table-based centering much, much better. I loose the ability to trigger HOVER on my text link via mouseover on the graphic, but everything else is 100% bullet-proof with a table.
Have a look:
The CSS-positioned gray box is at the top, and the Table-positioned one is at the bottom. They both look almost the same to start, but once you increase/decrease the text size, the differences are stark.
Safari > View > Zoom Text Only (enable it)
Then press CMD+ & CMD- several times. The Table-positioned box looks as intended — beautiful. It was easy to implement as well. No Actions. No extended hacks. And most importantly, it can be drawn with 99% of my brain turned off in all of 60 seconds.
Also note that the graphic inside the Table (bottom) is sharp while the graphic inside the CSS one (top) is slightly fuzzy.
And although there will come a time when the text grows beyond the table, such is not going to happen in most situations.
I really don’t care about the Responsive Stuff. I just want a pic and a text link inside a colored box, both items vertically-centered inside the box, and allow for some growing room for the text size, as per differences in browsers on various platforms. The Table accomplishes this. The sad part is that I cannot trigger the text link’s HOVER by mousing over the pic, but I guess that’s the price that must be paid for convenience.
I realized this morning that for the specific layout you are aiming at, we are both ridiculously over-thinking this problem. A single inline image within a flow of text can have its vertical align set to center within its parent paragraph. No need for transform tricks. Certainly no need for tables or their ilk.
I did sneak display: table in there on the gray box, but that’s just to get it to “shrink-wrap” around its contents width-wise. You could get the same effect by floating it left, too.
Turn off display:table in this example, and it will still work. I was only using that to shrink-wrap the box to the text from right to left, it has nothing to do with centering. You can get the same effect by using float:left on the colored box.
Walter
On May 27, 2015, at 10:13 PM, JDW email@hidden wrote:
And in the future when I am willing to turn a blind eye to IE9 support (maybe two years from now), FLEXBOX may become the ultimate CENTERING solution:
