图片导航 CSS答案

【问题标题】：Picture Navigation CSS图片导航 CSS
【发布时间】：2014-05-02 21:35:00
【问题描述】：

所以我有一个 div 内高度和宽度可变的图像。我添加了多张图片并隐藏了除其中一张之外的所有图片。我添加了导航按钮来显示下一个图像和上一个图像。这些是图像本身，我想做的是将它们放在图片的中间，就在它的左右两边。

我已将它们放在图片的左侧和右侧，但似乎无法将它们垂直居中。有什么好办法吗？

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>

当前的 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;
}

当前外观：

【问题讨论】：

为了获得更好的支持和更好的答案，您应该提供一个 jsfiddle。
你检查stackoverflow.com/questions/396145/…
是的，试过了，好像没用。
对于志愿者来说，一个稍微修改过的小提琴； jsfiddle.net/NJg99

标签： html css image

【解决方案1】：

将此 CSS 添加到现有的。

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

TESTED HERE

【讨论】：

.pics 也包含价格，这使得49% 靠近图像底部，不确定它是否是 OP 想要的。
我改变它以使其准确到中心。