# Imagens em lightboxes não têm \`vertical-align\` definido, desalinhando-as com \`img\`s normais

**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:** [18 Junho , 2024 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:** 4
**Page:** 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: [18 Junho , 2024 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>

**Prioridade/Gravidade** : Baixa.  
**Plataforma** : Confirmado no Firefox 127.0 no Windows 10 e no Chrome 125.0.6422.165 no Android 14.  
**Descrição** : Veja abaixo.  
**Passos para reproduzir:** Coloque duas imagens, uma com resolução acima de 690×500 pixels (em qualquer dimensão) e outra com resolução abaixo, na mesma linha.

* * *

# Comportamento esperado

Imagens em lightbox e `img`s “nuas” devem ser tratadas da mesma forma pelo CSS, desconsiderando todos os recursos extras de um lightbox.

# O problema

O CSS integrado do Discourse tem `vertical-align: middle` definido para `img`, mas _não_ para `.lightbox-wrapper`, resultando em imagens em lightbox e fora de lightbox na mesma linha desalinhadas e ocupando espaço vertical desnecessário:

 ![](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)

# A solução

A correção é simples: adicione `vertical-align: middle` também a `.lightbox-wrapper`.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [18 Junho , 2024 20:01 UTC](https://meta.discourse.org/t/lightboxed-images-do-not-have-vertical-align-set-misaligning-them-with-naked-img-s/312553/2 "2024-06-18T20:01:48Z")

</div>

Obrigado pelo relatório detalhado! Uma correção foi aplicada aqui:

> <https://github.com/discourse/discourse/pull/27520>
>
> Reported here: https://meta.discourse.org/t/lightboxed-images-do-not-have-vertic…al-align-set-misaligning-them-with-naked-img-s/312553/1
> 
> Since images have \`vertical-align: middle\`, the lightbox wrapper needs it for aligning with sibling images (without lightboxes) in posts. 
> 
> Before: 
> !\[image\](https://github.com/discourse/discourse/assets/1681963/36802082-065f-45a7-b54c-5cd5d476bdef)
> 
> After:
> !\[image\](https://github.com/discourse/discourse/assets/1681963/6976a4b4-2123-4816-892d-f63e328336f6)

e estará disponível nas atualizações do Discourse em breve.

---

<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: [18 Junho , 2024 21:16 UTC](https://meta.discourse.org/t/lightboxed-images-do-not-have-vertical-align-set-misaligning-them-with-naked-img-s/312553/3 "2024-06-18T21:16:28Z")

</div>

Maravilha! Muito obrigado! 😊

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [22 Junho , 2024 07:00 UTC](https://meta.discourse.org/t/lightboxed-images-do-not-have-vertical-align-set-misaligning-them-with-naked-img-s/312553/4 "2024-06-22T07:00:20Z")

</div>

Este tópico foi fechado automaticamente após 3 dias. Novas respostas não são mais permitidas.