Search code examples
jquery-mobilealignmentvertical-alignment

jquery mobile footer text vertical alignment

I'm trying to align text with image in footer area. But it seems that the text will either go top (vertical-align:top) or go right down to the bottom (vertical-align:middle), just not in the middle that I want it to be.

    <div data-role="footer">
        <div class="ui-grid-b">
            <div class="ui-block-a"><img src="img/13-target.png">
                <label style="vertical-align:middle;">Overview</label>
            </div>
            .........
        </div><!-- /grid-b -->
    </div>
Solution

  • Depending on the CSS you are using to style the footer (outside of JQM styles), you may need to adjust the line-height property of your label. This has worked for me when there was alignment issues.

    Hope this helps!