Picture Navigation CSS

Question

So I have an Image which is of variable height and width inside a div. I have added multiple pictures and hidden all but 1 of them. I have added navigation buttons to display the next image and previous image. These are images themselves, and what I want to do is put them in the middle of the picture just to the left and right of it.

I have gotten them to the left and right of the picture, but cannot seem to get them vertically centered. Is there a good way to do this?

HTML:

<div class="pics">
<div id="prev"></div>
<div id="next"></div>
<img id="pic0" src="fileView.php?id=1" alt="9&quot; x 13&quot; Cake" width="80%" class="curr">
<img id="pic1" src="fileView.php?id=12" alt="9&quot; x 13&quot; Cake" width="80%" class="hide">
<p id="cost" style="float:left;"><b>Price: $15.00</b></p>
</div>

Current CSS:

.pics{
float:left; 
}
#prev, #next{
float:left;
cursor:pointer;
height:30px;
width:30px;
display: table-cell;
vertical-align: middle;
}
#prev{
background:url(fancybox/fancy_nav_left.png) no-repeat center;
}#next{
background:url(fancybox/fancy_nav_right.png) no-repeat center;
margin-left:200px;
}
*[id*='pic']{
margin-left:40px;
margin-right:10px;
}

Current Look: enter image description here

For better support and better answers you should provide a jsfiddle. — radubogdan, May 02 '14 at 21:44
Did you check http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css — z--, May 02 '14 at 21:45
for the volunteers, a slightly modified fiddle; http://jsfiddle.net/NJg99/ — Marcel, May 02 '14 at 22:17

Neil · Accepted Answer · 2014-05-02T22:25:34.883

0

Add this CSS to the Existing.

.pics{
position:relative;
}
#prev, #next{
position:absolute;
margin-top:49%;
}

TESTED HERE

edited May 02 '14 at 22:25

answered May 02 '14 at 22:00

Neil

402
6
18

`.pics` contains the price as well which makes `49%` be near the bottom of the image, not sure if it's what OP wants. – Marcel May 02 '14 at 22:19
that i changed to get it exactly to the center. – Neil May 03 '14 at 10:15

Picture Navigation CSS

1 Answers1