Centering Made Easy

Almost a note-to-self today. :-) Now that IE6 and IE7 are dead unless you need to support users from the far East, centering content within elements using CSS is dead easy. Three simple rules:

display:        table-cell;
text-align:     center;
vertical-align: middle;

So for instance:

<style>
  .content {
    width: 300px;
    height: 300px;
    border: 1px solid #aaa;
    padding: 2px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
</style>
<div class="content">
    Here is <strong>my content</strong> with
    <em>markup</em>; my content wraps in the container,
    but that's not a problem for this technique.
</div>

That comes out with the content nicely displayed centered both horizontally and vertically. Unlike the line-height trick, it works well with content that wraps. Here's a live example.

I'm not saying we should have to say things are table-cells when they're not, but at least it's only in the presentation layer, not the markup.

Font Size Units

I've always used points (pt values) for sizing fonts on web pages, e.g.:

body {
    font-size: 12pt;
}

Those of you who know me know that I'm a developer, not a designer (in the web designer sense; I design systems, but that's different). I couldn't visual-design my way out of a paper bag. (Okay, maybe that's a bit harsh.) I don't think I'm a one-trick pony, but I'm definitely much more left- than right-brained. The engineer in me says, I'm setting a font size, right? And fonts are measured in points, so I use points. Or at least, I used to.

Chris Coyier, on the other hand, is a designer. And he gives some good reasons even an engineer can understand why using pt values only makes sense for print stylesheets, not screen stylesheets. And apparently he's just recently been converting himself to using ems rather than pixels. Both articles are interesting reads.

9pt grey text on a dark grey background

Is it just me? Am I getting old? (Well, yes, but...) Surely 9pt grey text (#646464) on a dark-grey background (#1C1C1C) qualifies as a Bad Idea^TM? How's this for readable:

Form Factor	mini-PC
CPU Socket	Intel® Atom™ D525 (dual-core) (1.8 GHz) Intel® HyperThreading™ technology
Chipset	NM10 Express
GPU	Intel® GMA 3150
Memory	Up to 4GB
Harddrive	2.5“ drive bay SATA 3.0 Gb/s compatible
Graphics Output	1 VGA / 1 HDMI

And even that's better than the original linked above, I haven't managed to find all the styles they applied to mess up the text.

Grumble...

Ever wondered what browsers support <insert feature here>?

There's a site for that: caniuse.com.

So, for instance, what browsers support the File API? These ones: http://caniuse.com/#search=file api.

CSS and showing my age

Okay. I can't be the only one. Surely some of you also have trouble remembering the order of the values in CSS shorthand properties, e.g.:

margin: 10px 20px 30px 40px;

I mean, I'm an engineering kind of guy. I'm used to coordinate systems like (top,left)-(bottom,right) or (x1,y1)-(x2,y2). CSS, however, uses neither. Instead, it's top right bottom left. I expect there's a good reason.

So showing my age, but I just could not keep that in my head. I kept thinking, "if only I understood why they'd done it, maybe I could remember it." But I've gone one better, and am showing my age ^ 2: I'll just remember "tribble".

That's right. Cute furry (and ultimately dangerous) things from Star Trek: The Original Series. "tribble" as in T R B L as in Top Right Bottom Left:

         +----------------- Top
         |    +------------ Right
         |    |    +------- Bottom
         |    |    |    +-- Left
         v    v    v    v
margin: 10px 20px 30px 40px;

Sorted.

I suppose I'd be remiss if I opened this topic but didn't mention that you can also specify one, two, or three values, but the mnemonic holds well enough  basically, just remember to start with the T and you'll be okay. Specifically:

         +----------------- (All four)
         v
margin: 10px;

         +----------------- Top & Bottom
         |    +------------ Right & Left
         v    v
margin: 10px 20px;

         +----------------- Top
         |    +------------ Right & Left
         |    |    +------- Bottom
         v    v    v
margin: 10px 20px 30px;

Right, well, as there are no computers around here to reason into a conflicted meltdown, I guess I'll head off for a Saurian brandy and see if I can chat up an Orion slavegirl. I've always been partial to scantily-clad brunettes with green skin...