jquery mobile css center aligned view

Posted: January 30, 2013 in css, jquery mobile, mobile, phonegap

I try to make a cool front page to my phonegap app.

I want four squares, similar to the squares u c on the android store app.

so I started to look for the css rules to make it happen.

First i created 4 divs (height=width=50%) and placed them in the content.

The page didn’t show anything so I put another css class for the jqm content div with height:100%, so i will show.

Then I wanted to place content in each square, this was rather hard I couldn’t find someting that works until I saw this post:

http://stackoverflow.com/questions/6405034/jquery-mobile-align-button-in-middle-of-screen

than i got it. the solution was

position: relative;
top: 50%;
left: 50%;
margin-top: -1.2em;

The html:

<div data-role=”content” class=”homepagecontent”>

<div class=”linkrect topleft”><p>1</p></div>
<div class=”linkrect topright”><p >2</p></div>
<div class=”linkrect bottomleft”><p >3</p></div>
<div class=”linkrect bottomright”><p >4</p></div>

</div>

The CSS:

.homepage{
height:100%;
margin:0;
padding:0 ;
}
.homepagecontent{
height:100%;
margin:0;
padding:0 ;
}

.linkrect{
height:50%;
width:50%;

}

.linkrect p{
position: relative;
top: 50%;
left: 50%;
margin-top: -1.2em;
}
.topleft{
float: left;
background: red;
top:0;
left:0;
}

.topright{
float: right;
background: green;
top:0;
right:0;
}

.bottomleft{
float: left;
background: yellow;
}

.bottomright{
float: right;
background: pink;
}

 

Capture

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s