#vertical-align

img 외에는 의도대로 되는 경우가 전무

line-height 을 원하는 만큼 잡으면, 한 줄(!) 문자열은 완벽하게 된다.

하지만, 줄바꿈이라도 되거나 아이폰에서 넘치는 경우 잘려 버린다. 

position: absolute; top: 50%; margin-top: 1em;

By now I already had quite a lot of cross device issues but mostly it was Android who was being the annoying one but times have changed.

Since images can be vertically aligned inside the parent element by using the vertical-align property, text does not. Since there are quite some different ways to approach this. The easiest and best looking one i've found was by the use of CSS tables, don't confuse this with the hated/frowned upon/total no-go HTML tables.

Basically how it works is as following:

div#parent {

          width: 50%;

          height: 30%;

          display: table;

}

div#child {

          display: table-cell;

          text-align: center; 

          vertical-align: middle;

}

This all worked like a charm on all devices, until I wanted to float 2 buttons next to each other both with the table & table-cell elements, this is a no-go for iOS it just does not float while it does work fine on Android. Tried a couple of different things but to no avail. So my last option was to add a container around the div#parent element and float that one instead of the div#parent which had the display: table; property.

And guess what, the buttons lived happily next to each other on all devices for as long as they have to be there!

<style type="text/css">

div { height: 100px; width: 100px; border: 1px solid red; }

div * { vertical-align: middle; }

div p { margin:0; display: inline-block; *display:inline; zoom:1; border: 1px solid green; line-height:1; }

div span { display: inline-block; height: 100%; }

</style>

<div>

<p>blue blue blue blue <br />  blue blue <br /></p>

<span></span>