CODEWITHSUNDEEP
htmlcssalignment
user2878249
user2878249

Reputation: 643

Horizontal Alignment of div with css background

i want to align a picture between two buttons inside a div

<div>
<button class="button">left</button>
<div class="picture">
<button class="button">right</button>  
</div>

this is what i have tried http://jsfiddle.net/27YPH/

it works when i use an img tag for the image but gets messed up when i use the css-background propery to set the image

The image is a sprite so i dont want to use the img tag

now how do i place the div with the background between the 2 buttons?

Upvotes: 0

Views: 122

Answers (1)

Nitesh
Nitesh

Reputation: 15769

Your code is incorrect. You do not have a closing div for <div class="picture"> You need to close that by <div class="picture">&nbsp;</div>

After that, you need to put a height and width for the class that contains the background image.

For instance, 

.picture
{
    float:left;
    background:url("http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png") 0 0;
    width:128px; height:128px;


}

And then, you can get the image aligned.

Below is the demo.

WORKING DEMO

Hope this helps.

ADD ON:

If you want to vertically align you image, as per your code, below is the demo.

WORKING DEMO

Upvotes: 3

Related Questions