CODEWITHSUNDEEP
jqueryhtmlimagejquery-mobile
Jonh Smid
Jonh Smid

Reputation: 421

how to center image in jquery mobile?

I need to have in my mobile website an image in the start of the page and in the middle , like the image below:

enter image description here

How can i accomplish that in jquery mobile? I need a solution that will place the image always in the middle no matter what screen(mobile) the user uses. Also is there a way that the image will look bigger or smaller according to the screen? Like adopt in every different screen?

From the jquery mobile site , when i use the codiqa to create an image in the start of the page and in the middle the code looks like this :

<div style="width: 288px; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
            <img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>

However is not positioned correct and also the margins are in pixels insteaf of percentage , which i guess is wrong.

Any ideas?

Upvotes: 0

Views: 21606

Answers (3)

SiD quakers
SiD quakers

Reputation: 63

CSS

img {
    display: block;
    margin: auto;
}

Upvotes: 1

Skadi2k3
Skadi2k3

Reputation: 66

I think this is more like it: http://jsfiddle.net/5T78X/28/

HTML

<div data-role="page" id="index">
    <div data-role="content" id="content">
        <figure id="topimg">
            <img src="http://codiqa.com/static/images/v2/image.png" alt="image" />
        </figure>
    </div>
</div>

CSS

#topimg {
    text-align: center; /* center the image */
    margin: 1em; 
    border: 4px solid blue;
    border-radius: 5px;
}
#topimg img {
    display: inline-block;  /* treat the img like text */
    max-width: 60px; /*resolution of the img*/
    width: 10%; /* shrink to 10% if lower than 60px */
    margin: 3em auto;  /* add space between top and bottom edge of container */
}

I'm assuming [data-role="page"] { width: 100%; margin:0;} is still set.

Mixing in styles into the markup is strongly discouraged. Also shifting images around with fixed positioning and discrete pixel values didn't look that right to me.

Upvotes: 1

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/5T78X/

HTML : 

    <div data-role="page" id="index">
        <div data-theme="b" data-role="header">
            <h1>Index page</h1>
        </div>

        <div data-role="content" id="content">
            <div style="width: 100%; height: 100%; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
                <img src="http://codiqa.com/static/images/v2/image.png" alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px"/>
            </div>
        </div>
    </div>

CSS :

#content {
    position:absolute;
    top:40px;
    right:0;
    bottom:0;
    left:0;
}

Upvotes: 3

Related Questions