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

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将不起作用，因此您需要设置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;

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

然后你可以像上面提到的那样在里面放置左右图标。

Demo

旁注:滚动是由于我在演示中添加了边框，因为我看不到图像(可能它在我的网络中被阻止)。