Vertical Centering

Vertical centering

by nirmaljpatel

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
          <div class="ui-grid-b">
    <div class="ui-block-a"><p>Block A<p></div>
    <div class="ui-block-b">Block B<br>line2<br>line3</div>
    <div class="ui-block-c">Block C</div>
</div>
    </div>
</div>

CSS

.ui-block-a, .ui-block-b, .ui-block-c{
    display: table-cell;
    vertical-align: middle;
    background: #f8f8f8;
    height: 100px;
}