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.


  • @doist/reactist version: 11.0.0
  • react version: ^16.13.1
  • Browser: Firefox @ Windows 10

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

gnapsecommented, Feb 11, 2022

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.

henningmucommented, Feb 11, 2022

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 👀

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found