# 灯箱图片没有设置 \`vertical-align\` 属性，导致它们与裸露的 \`img\` 标签对齐出现问题

**URL:** <https://meta.discourse.org/t/lightboxed-images-do-not-have-vertical-align-set-misaligning-them-with-naked-img-s/312553>\
**Category:** Bug\
**Tags:** lightbox, fixed\
**Created:** [2024年六月18日 13:45 UTC](https://meta.discourse.org/t/lightboxed-images-do-not-have-vertical-align-set-misaligning-them-with-naked-img-s/312553 "2024-06-18T13:45:07Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Obskyr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/obskyr/32/375733_2.png) [@Obskyr](https://meta.discourse.org/u/Obskyr)\
**Post date:** [2024年六月18日 13:45 UTC](https://meta.discourse.org/t/lightboxed-images-do-not-have-vertical-align-set-misaligning-them-with-naked-img-s/312553/1 "2024-06-18T13:45:07Z")

</div>

**优先级/严重性** : 低。\n **平台** : 在 Windows 10 上的 Firefox 127.0 和 Android 14 上的 Chrome 125.0.6422.165 中已确认。\n **描述** : 见下文。\n **可复现步骤:** 将两个图片放在同一行，一个分辨率高于 690×500 像素（任一维度），另一个低于此分辨率。\n\n—\n\n# 预期行为\n\nLightboxed 图片和裸露的 `img` 应该被 CSS 以相同的方式处理，去除灯箱的所有额外附加功能。\n\n# 问题\n\nDiscourse 内置的 CSS 为 `img` 设置了 `vertical-align: middle`，但_没有_为 `.lightbox-wrapper` 设置，导致同一行上的 lightboxed 和非 lightboxed 图片对齐不正确，并占用不必要的垂直空间：\n\n

 ![](https://global.discourse-cdn.com/meta/original/4X/4/c/7/4c7dda08f514ef3cff1627fb6f1fdbf3c54d553a.png) ![](https://global.discourse-cdn.com/meta/original/4X/a/a/2/aa214ee82b2684d451807e4cf1feebcaca807af3.png) ![](https://global.discourse-cdn.com/meta/original/4X/d/5/0/d50efb83b2e770aa17e80d547606fc8df43afd3a.png) ![](https://global.discourse-cdn.com/meta/original/4X/3/c/d/3cd86be4fdfebe7941dff60837bd8f2687bf6a18.png) ![](https://global.discourse-cdn.com/meta/original/4X/2/d/c/2dc231008beb1ff2fb6475f5c635f6bb64b901e1.png)\n\n# 解决方案\n\n修复很简单：也为 `.lightbox-wrapper` 添加 `vertical-align: middle`。

---

_[View the full topic](https://meta.discourse.org/t/lightboxed-images-do-not-have-vertical-align-set-misaligning-them-with-naked-img-s/312553)._