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

Posted 2023-03-06

【中文标题】如何在图像的垂直中间显示带有前后文本的图像？

【英文标题】：How to display an image with the text before it and after it in the vertical middle of the image?

【发布时间】：2012-09-15 09:52:21

【问题描述】：

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

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

【问题讨论】：

您有正在使用的代码示例吗？

类似：melin-y-derw.com/our-work/bedrooms?

@doublesharp：我正在使用一个有 3 列的表格并使用 valign 进行垂直对齐。首先，我认为为此使用表格是错误的，但我不知道任何方法，其次，即使这样也行不通。有任何想法吗？谢谢！

@David：它不必像那样花哨。换句话说，“上一个”和“下一个”链接不需要与图像重叠，它们需要在同一行的前后，只是与图像的垂直中心对齐（其宽度和高度不断变化）。有任何想法吗？谢谢！

这个想法是让您查看 CSS 并了解它是如何完成的，它可能看起来很花哨，但它的完成方式非常基本，正如我的回答中所见 ;-)

【参考方案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/

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

【讨论】：

有趣。这会影响网站上的所有图片吗？我只希望这会影响特定的画廊图片 (class="gallery")。

所以相应地调整 CSS 选择器，例如，.gallery img, .gallery span 而不是 div img, div span。

它将影响所有符合条件的图像，您需要使其更具体。当心 inline-block 好像有空白（在他的示例中有），它可能会在元素之间留下间隙（当它们具有背景颜色等时很明显）

@bfavaretto：谢谢，那么这是实现此目的的最直接、“兼容”和“不那么麻烦”的方式吗？

嗯，我喜欢这个解决方案，但没有什么是完美的。例如，您会注意到，inline-block 元素会受到源代码中围绕它们的空格的影响。不确定这对您是否有问题。至于兼容性，旧版本的 Firefox（我认为是 3.5 之前）存在问题，但除此之外它得到了广泛支持。

【参考方案2】：

你可以在下一个/上一个链接上使用类似的东西（如果他们有一个说 .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% 等等）。

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

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

示例 html：

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

【讨论】：

谢谢。您能否解释一下这是在做什么以及为什么要使用这样一个看似任意的数字（例如 45%）？这个解决方案是否比上述 bfavaretto 的解决方案更广泛兼容（例如，更少“hacky”）？

感谢您的解释。但是如果元素高度发生变化，我怎么知道是使用 45% 还是其他值呢？画廊有不同高度/宽度的图像，我需要文本始终以每个图像为中心。

这是 .next / .prev 元素的高度，而不是图像本身。 % 使它与包含块的中心对齐。当图像在其内部发生变化时，包含块将自动增加/减少它自己的高度，为它腾出空间或删除不需要的空间。

但是如果下一个/上一个元素的高度总是小于图像的高度，为什么它们的高度很重要？

好的，让我们开始数学吧。元素高度的完美中心是 50% 是吗？如果我们设置顶部：50%；但是，这将意味着链接的 top 位于中间，而不是链接的中间，导致它不完全位于中心。要使其居中，您需要将尝试垂直对齐的元素的高度除以 2，然后从 50 中减去它。

【参考方案3】：

请记住，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

【讨论】：

有趣。这行得通，但是两个按钮都在页面的每个极端，而不是在相对两侧的图像旁边。如何使链接在图像旁边保持静态，以便在调整页面大小时它们不会移动？谢谢。

@Programmer：嗯，只是调整容器行为？如果您需要它紧紧包裹图像this 会起作用

【参考方案4】：

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

<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/

【讨论】：

似乎有时最简单的解决方案被忽略了。 :) 这很好用，似乎与大多数浏览器兼容，并且需要最少的代码。你赢了！ （请编辑您的 HTML 以修复 "myGallery 之后缺少的引号。）