Loading...

Search jQuery

Search

jQuery Forum

center image inside button, inside grid box

in jQuery Mobile • 11 years ago

<div class="ui-grid-b">
<div class="ui-block-a">
<div class="test" data-role="button">
<a href="#teachers" data-transition="pop" >
<img src="img/User.png" class="menu_img" ></img>
</a>
</div>
</div>
.....
</div>

.menu_img {
display: block;
margin:0 auto;
}
.test {
max-width: 80px;
max-height: 80px;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}

Hello all, above is my code. Basically i'm making a menu (first page) where i use grid layout to position

the buttons.Then i just want a button in every block that has an image in it. But i can't center the image

in the button. Any ideas? Thank you for your time and interest.

Alkiviadis

1

Replies(2)

Re: center image inside button, inside grid box

11 years ago

Try adding the image as the background.

<div class="ui-grid-b">
<div class="ui-block-a">
<div class="test" data-role="button">
<a href="#teachers" data-transition="pop" class="menu_img" ></a>
</div>
</div>
.....
</div>

.menu_img {
display: block;
margin:0 auto;
background-image: url( "img/User.png" );
background-position:center;
background-clip:content-box;
background-size: contain;
background-repeat: no-repeat;
}

Re: center image inside button, inside grid box

11 years ago

It's been a while that i posted this question so i've implemented in a different way. But i will give this a go.

I didn't know of the background-size: contain;

Thank you very much for your time!