Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Notice: content is not vertically aligned with the AlertIcon
See original GitHub issue🐛 Bug report
Current behavior
The Notice component content is not vertically aligned with the AlertIcon
Steps to reproduce the bug
On the reactist playground:
On Twist settings:
Expected behavior
The Notice component content should be vertically aligned with the AlertIcon.
Environment
@doist/reactistversion: 11.0.0reactversion: ^16.13.1- Browser: Firefox @ Windows 10
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (6 by maintainers)
Top Results From Across the Web
Why is vertical-align: middle not working on my span or div?
In my case, since I wanted to center the content of .inner horizontally too, I had to add .inner { width: 100%; }...
Read more >vertical-align - CSS: Cascading Style Sheets - MDN Web Docs
The vertical-align property can be used in two contexts: To vertically align an inline element's box inside its containing line box.
Read more >CSS vertical-align Property | DigitalOcean
vertical -align defines the vertical alignment for the content of a table cell or for an inline element against the rest of the...
Read more >Vertical Alignment Bug with Icons - RIMdev
If you have been working with an icon set and noticed that your icons are not vertically centered, then you are not alone....
Read more >July 2022 | Vertical Align for Content Prerelease Notice
Overview We are providing this pre-release notice of changes to the BEE Plugin UI so that you may update your customer-facing support...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
From the discussion above, the issue only happens in Windows. At least in my experience. Not sure how you ever saw it if you only tried on macOS. I may need more time to dig in and see how this can be solved for Windows without breaking it on macOS.
If I remember correctly it was a line-height problem and setting it to the height of the container fixed it. But my memories are not very clear – with that being said, I can’t even see the issue anymore 👀