将垂直居中对齐的导航箭头定位到图像的左侧和右侧

Question

如何让百分比声明起作用（#case-left, #case-right）..？

我的目标是将这两个元素分别对齐图像的左侧和右侧，始终是图像顶部的50％。

如下图所示：

据我所知，我的#nav-container元素不够高。

HTML：

<div id="case-example-cover">
    <div id="nav-container">
        <div id="case-left"></div>
        <div id="case-right"></div>
    </div>
    <img src="http://s7.directupload.net/images/140625/yflekqdc.jpg">
</div>

CSS：

#case-example-cover {
    height: 100%;
    margin-top: 80px;
    width: 100%;
}

#case-example-cover #nav-container {
    margin: 0 auto;
    max-width: 980px;
    position: relative;
    width: 100%;
}

#case-example-cover #case-left {
    background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
    float: right;
    height: 38px;
    width: 38px;
    position: absolute;
    left: 0;
    top:50%;
}

#case-example-cover #case-right {
    background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
    height: 38px;
    width: 38px;
    position: absolute;
    right: 0;
    top:50%;
}

#case-example-cover img {
    height: auto;
    width: 100%;
}

在JS fiddle

查看我当前的样本

Answer 1

height中指定的
• %如果父元素没有明确设置height，则无法正常工作，因此您需要为html设置高度body
• float对absolute定位元素
没有影响
• 选择器#case-example-cover #case-right可以只是#case-right，因为id在文档中是唯一的

HTML

<div id="case-example-cover">
  <div id="nav-container">
    <div id="case-left"></div>
    <div id="case-right"></div>
    <img src="http://s7.directupload.net/images/140625/yflekqdc.jpg" />
  </div>
</div>

CSS

html, body {
 height:100%;
}
#case-example-cover {
 width: 100%;
 height: 100%;
 margin-top: 80px;
}
#nav-container {
 position: relative;
 width: 100%;
 max-width: 980px;
}
#nav-container div{
 position: absolute;
 top: -webkit-calc(50% - 19px);
 top: -moz-calc(50% - 19px);
 top: -ms-calc(50% - 19px);
 top: calc(50% - 19px);
 width: 38px;
 height: 38px;
 background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
}
#case-left { 
 left: 0;
}
#case-right {
 right: 0;
}
#case-example-cover img {
 width: 100%;
 height: auto;
}

Demo

<强>更新

对于基于宽度可变的图像容器对齐图标容器的中心，您需要相对于图像容器绝对定位并应用

top:0;
right:0;
bottom:0;
left:0;

创建一个块，然后应用margin:auto;

然后您可以如上所述在其中放置左右图标。

Demo

附注：滚动是由于我已经在演示中添加了边框，因为我无法看到图像（可能它已在我的网络中被屏蔽）。

Answer 2

将图像移动到容器div中。同时指定顶部属性，如下所示。

<强> HTML

    <div id="case-example-cover">
    <div id="nav-container">
        <div id="case-left"></div>
        <div id="case-right"></div>
        <img src="http://s7.directupload.net/images/140625/yflekqdc.jpg"/>
    </div>

CSS

#case-example-cover #case-left {
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
float: right;
height: 38px;
width: 38px;
position: absolute;
left: 0;
top:calc(50% - 19px);
}

#case-example-cover #case-right {
background-image: url("http://s7.directupload.net/images/140625/lhmdzrfd.png");
height: 38px;
width: 38px;
position: absolute;
right: 0;
top:calc(50% - 19px);
}

FIDDLE DEMO