4

在我的一个网站上，我想显示一个简单的图片库，其中包含“上一个”和“下一个”文本链接，在每个图像之前和之后（分别）垂直居中对齐，以便我的用户可以轻松地在图像之间导航。

我怎样才能做到这一点？无论我尝试什么，我都无法让它发挥作用。

4

4 回答 4

4

这是一个简单的技术：

HTML

<div>
    ​&lt;span>before</span>
    <img src="https://www.google.com/images/srpr/logo3w.png">
    <span>after</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

div span,
div img {
    display: inline-block;
    vertical-align: middle;
}​

http://jsfiddle.net/mGpz6/

这是有效的，因为您可以控制元素的vertical-align值。inline-block您不能对常规inline元素执行此操作，它们将始终与（文本）基线对齐，这可能是您在网站上遇到的情况。

于 2012-09-23T21:49:59.327 回答
3

简单的解决方案有什么问题？

<div class="myGallery">
    ​&lt;span>before</span>
    <img src="http://www.spiraluniverse.com/uploads/tx_templavoila/image1.jpg">
    <span>after</span>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

.myGallery img {
    vertical-align: middle;
}​

结果如下：http: //jsfiddle.net/6e87c/embedded/result/

于 2012-09-23T22:45:41.213 回答
0

请记住，该vertical-align属性不适用于块级元素。

在这种情况下，使用相对于画廊容器的绝对定位是可以接受的。完成后使用边距调整按钮的位置，即使容器 div 垂直拉伸（例如，容纳更高的图像），这也会强制按钮保持原位

.gallery {/*our container element*/
  position:relative;
}
.btn-prev, .btn-next {
  width:40px;height:40px;/*we know the buttons will never change size dynamically*/
  margin:-20px 0;/*so we can use explicit px value to shift them as needed*/
  position:absolute;
  top:50%;
}
.btn-prev {/*remember to correctly position the buttons horizontally*/
  left:0;
}
.btn-next {
  right:0;
}

摆弄

于 2012-09-23T22:45:07.280 回答
0

您可以在下一个/上一个链接上使用类似的东西（如果它们有一个说 .next 和 .prev 的类）：

.gallery-container {
  position: relative;
}
.next { right: 0; }
.prev { left: 0; }
.next, .prev {
  position: absolute;
  top: 45%;
}

元素 .next 和 .prev 绝对定位到它们的父元素（.gallery-container），并且它们的位置偏移了最大值（小于 50 的 %，如果元素高 10%，它会最高：45%，如果高度为 20%，则最高：40% 等等）。

您需要稍微调整一些值，例如 left 和 right 属性以更准确地匹配 .next / .prev 元素的宽度。如果 .prev 是 40pixels 宽，那么 left: -40px; 是你需要的。

这个解决方案是非常可定制的，几乎所有浏览器都支持。

示例 HTML：

<div class="gallery-container">
  <a class="prev" href="#">Prev</a>
  <img src="..." />
  <a class="next" href="#">Next</a>
</div>
于 2012-09-23T21:50:28.653 回答