Center image between buttons - html

Question

I'm trying to customise my blog on Tumblr, but I'm having some trouble. What I want is a picture centered horizontally in my blog, with a next and previous button around it. It should look like
O [__] O
where the O's are my buttons and the [_] represents my picture.
How do I get the three elements together to be centered on my page and the buttons a certain amount of pixels away from the picture? Both buttons each have their own DIV, the photo has a class and there is one DIV enclosing the three of them.
My HTML is like this:
<div class="photo-wrap">
<div id="previous">
<img src="http://static.tumblr.com/gptupvc/hUhlxhrgd/next.png"></img>
</div>
{block:Posts}
{block:Photo}
<center>
<img class="photo" src="{PhotoURL-HighRes}"></img></center>
{/block:Photo}
{/block:Posts}
</div>
<div id="next">
<img src="http://static.tumblr.com/gptupvc/hUhlxhrgd/next.png"></img>
</div>
with the following CSS
.photo-wrap {
position:relative;
margin-top:50px;
width:1200px;
margin-left:auto;
margin-right:auto;
background-color:red;
}
.photo {
float:left;
height:600px;
border-radius:10px;
}
#next {
float:right;
margin-top:-350px;
background-color:green;
}
#next img {
width:100px;
height:100px;
}
#previous {
float:left;
margin-top:250px;
background-color:red;
}
#previous img {
width:100px;
height:100px;
}

Answer 1

Use a table! Ha! I know. We aren't "allowed". I don't have tumblr. But I can answer this generally for any HTML.
Put your three widgets into a div and style it with style="text-align:center". Now, anything you put inside of that div will be centered.
<div style="text-align:center">Stuff</div>
Next, put each of the widgets into their own divs and style them so that they appear "inline"
<div style="text-align:center">
<div style="display:inline">Previous</div>
<div style="display:inline">Button</div>
<div style="display:inline">Next</div>
</div>
Last, you want spacing -- so fiddle with margin and padding until you get what you want. For instance, try this:
<div style="text-align:center">
<div style="display:inline">Previous</div>
<div style="display:inline;margin-left:25px;">Button</div>
<div style="display:inline;margin-left:25px;">Next</div>
</div>
And you'll probably want to put all that styling in CSS ultimately. But do that last.
By the way, another way to achieve horizontal spacing is to use "margin:0 auto" on the containing div.
Vertical centering is something all together different, but you didn't ask about that.
Good luck!

Answer 2

I would suggest you to try this code
<style type="text/css">
#image{float:left;}/*this is the important part to set float*/
#male{float:left;}
</style>
<form>
<input id="male" type="radio" name="sex" value="male" > Male
<div id ="image"><img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" /></div>
<input type="radio" name="sex" value="female" /> Female
</form