How to vertically align all HGroups in application to "middle"?

Question

In my application all HGroups should be vertically aligned to middle. As this is a property of HorizontalLayout which is exposed via HGroup's verticalAlign property (not style) I can't set it in CSS. Also, while Groups are not skinnable I can't assign a custom skin.

Is creating a subclass like VerticallyAlignedHGroup my only option or is there a better way?

Answer 1

Borek,

Normally you can only apply vertical alignment using the CSS property verical-align to table elements (th, td). However...

If you're using DIVs then just fake it using table-cell display. You will have to wrap up your .verticallyAlignedHGroup in a parent DIV so you can declare its display as table though.

#verticalWrapper { display: table; }
.verticalAlignHGroup { display: table-cell; vertical-align: middle; }

The HTML would look something like this

<div id="verticalWrapper"> <!-- display: table -->
  <div class="verticalAlignHGroup"> <!-- display: table-cell; vertical-align: middle -->
    Some content
  </div>
  <div class="verticalAlignHGroup"> <!-- display: table-cell; vertical-align: middle -->
    Some content
  </div>
</div>

Hope that helps.

Answer 2

I've run across this as well and after some research wound up doing as you mentioned and created my own subclass of HGroup that had verticalAlign set to "middle". Wish I had a better solution for you, but I've been unable to find one.