Question

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

我该怎么做？无论我尝试什么，我都无法让它发挥作用。

Answer 1

这是一个简单的技术：

<强> HTML

<div>
    <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元素执行此操作，它们将始终与（文本）基线对齐，这可能是您在网站上遇到的情况。

Answer 2

直截了当的解决方案有什么问题？

<div class="myGallery">
    <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/

Answer 3

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

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

元素.next和.prev绝对定位于其父级（.gallery-container），并且它们的位置偏移顶部值（如果元素高10％，则小于50％，它将是最高的：45％，如果它的高度为20％，它的顶部：40％等。

您需要稍微调整一些值，例如左侧和右侧属性，以便更准确地匹配.next / .prev元素的宽度。如果.prev宽度为40像素，则左：-40px;是你需要的。

此解决方案非常易于定制，并且几乎适用于所有浏览器。

示例HTML：

<div class="gallery-container">
  <a class="prev" href="#">Prev</a>
  <img src="..." />
  <a class="next" href="#">Next</a>
</div>

Answer 4

请注意，vertical-align属性为inappliccable to block-level elements。

在这种情况下，使用相对于图库容器的绝对定位是可以接受的。在完成之后使用边距来调整按钮的位置，这将迫使按钮保持在原位，即使容器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;
}

Fiddled

如何在图像的垂直中间显示前面和后面的文本图像？

4 个答案: