Response title
This is preview!
How do you vertically center an image in ui-content ?
in jQuery Mobile
•
8 months ago
My ui-content is VERY simple, it's just a single image, really, nothing else, just a single image.
<div data-role="main" class="ui-content">
<div style="text-align:center;"><img src="images/home_logo_600px.svg" class="fullscreen"></div>
</div>
The CSS for "fullscreen" is just a simple:
.fullscreen
{
max-width:100%;
max-height:100%;
}
So here is the question, by doing text-align:center; I have centered the image that is now filling up the width of the whole screen on portrait mode thanks to max-width:100%;
How do I center the image vertically in ui-content ?
Thanks.
<div data-role="main" class="ui-content">
<div style="text-align:center;"><img src="images/home_logo_600px.svg" class="fullscreen"></div>
</div>
The CSS for "fullscreen" is just a simple:
.fullscreen
{
max-width:100%;
max-height:100%;
}
So here is the question, by doing text-align:center; I have centered the image that is now filling up the width of the whole screen on portrait mode thanks to max-width:100%;
How do I center the image vertically in ui-content ?
Thanks.
1