How to vertical center text in a div?

Freeway
1

I’ve long used Tables to do my vertical centering. But now that FW7 is out and CSS layout (responsive layout) is all the rage, I am thinking about centering via CSS (inline layout). But I can’t figure out how to do it, hence my post in this thread.

Watch this brief screencast (no sound, showing Freeway 7):

http://cl.ly/2d0g2d0B1s0B

Note that I’ve got one big HTML container box (height is left undefined so it can vertically expand or contract), and inside that container box are 3 pieces of content (pasted HTML boxes, all Floated Left):

  1. Graphic pass-thru at left which I made a child of an HTML box. It’s parent HTML box was pasted as an inline, then Floated Left.
  2. HTML box with text content in the middle, pasted as an inline, then Floated Left.
  3. HTML box with text content at right, pasted as an inline, then Floated Left.

Clearly, the box at right will always be vertically taller that the 2 items, so I don’t care about vertically centering it. But the two HTML boxes at left to be vertically centered, regardless of how the text in the browser shrinks or expands. And as you can see at the end of my video, vertical centering of that content won’t happen if I merely “fake” centering by way of adding a fixed Margin to the top of the HTML box I am trying to center.

How do I use Freeway to vertically center that content without using Margin or Padding to “fake” it? (Note that I am using Freeway 7 now, which should have all the power I need to accomplish this feat.)

Thanks,

James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Walter Davis kindly gave me the following solution…

Starting with your three boxes, yes, float them left as you have done, but then go into the

tab of the Item / Extended interface and add these three attributes to all of them:

display: inline-block
float: none
vertical-align: middle

Put float:none in there to override the float that you set in your interface (which you need in order to make the layout roughly WYSIWYG). It still won’t center vertically in Freeway’s Page View, but it will be aligned left to right and fit inside your horizontal box.

You can see it in action on my site here:
http://visionsecurity.jp/jp/interface/index.html

I should add that in Firefox, the rightmost box was being cast below the other two boxes. The fix was to add a little space at the right side of that rightmost box, which I did by decreasing the width of the rightmost box a few pixels.

I hope this is helpful to others seeking to vertically center content via CSS rather than tables.

–James Wages

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options