CODEWITHSUNDEEP
androidhtmlcsscordova
Pipe2Path
Pipe2Path

Reputation: 561

css centering does not work in Phonegap

I am trying to center an image with some text underneath. Works fine when I display in chrome. It also works well on an emulator using Opera Mobile. But when I create my phonegap app with the html/css files, the image refuses to center when run in Android.

Here is my css:

.centered {
    width: 100%;
    height: auto;
    position: fixed;
    top: 20%;
    text-align:center;
}

Any ideas?

Thanks

Upvotes: 1

Views: 2186

Answers (3)

dijipiji
dijipiji

Reputation: 3109

I would recommend defining the width of your image and using

    .centered{
margin:0 auto;
}

Upvotes: 0

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

Try this:

.centered { 
width: 100%;
height: auto; 
position: fixed; 
top: 20%; 
text-align:center; 
-webkit-backface-visibility: hidden;
}

Upvotes: 0

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

Could this be an issue with position: fixed;?

Try eg.

.centered {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    right: 0px;
    bottom: 20%;
    left: 0px;
    margin: auto;
    text-align: center;
}

Upvotes: 1

Related Questions