050644zf / ArknightsStoryTextReader

A website that help you read Arknights Stories
https://astr.pages.dev
MIT License
306 stars 19 forks source link

Enable horizontal centering #63

Closed RieLCho closed 3 days ago

RieLCho commented 1 week ago

Enabling images horizontally centered.

Closes https://github.com/050644zf/ArknightsStoryTextReader/issues/62

050644zf commented 5 days ago

thank you for pr. it's a nice feature but it seems not functioned properly in CN server and idk why?

image

RieLCho commented 5 days ago

Oops... I see, I forgot to check other server. So the problem here is that CN server and KR server have different layout right now. Giving margin-left for all server seems quite risky.

스크린샷 2024-10-09 오후 10 17 04 스크린샷 2024-10-09 오후 10 17 23

CN server's 1-1 start at about 300px, KR server's 1-1 start at 190px.

스크린샷 2024-10-09 오후 10 33 35

(Maybe because of npc name length difference? i guess)

I think we should find another way to solve this.

RieLCho commented 4 days ago

Using pseudo element wouldn't work, so we could make a div as a parent of every images and make them flex to center them

RieLCho commented 3 days ago

I hope this work. 🙏

Screenshots - CN ![image](https://github.com/user-attachments/assets/0e4d0578-8e56-4437-bda9-03b491cf546c) - KR ![image](https://github.com/user-attachments/assets/7838d0e7-ba89-4b24-a53e-feb00a52f0c5) - EN ![image](https://github.com/user-attachments/assets/e149222b-1b16-497c-bb49-62f90d3152e7) - JP ![image](https://github.com/user-attachments/assets/0ab112d7-90c0-4f71-a18c-0f5c219c5326) - Smaller window ![image](https://github.com/user-attachments/assets/b4ee2432-4439-489c-9022-63f11a3dc58d) - Mobile ![image](https://github.com/user-attachments/assets/c7398094-e2af-4e84-a2dc-6fff715fcbf9)
050644zf commented 3 days ago

Thanks, it now work properly