How can I center correctly my text or remove th "empty space" of my text?
Hi people, I hope someone can help me with this problem:
I would like to center my texts correctly but if you see the image, when I select my text, has an empty space in the bottom, and for that reason is not centered correctly.
I tried to use
font-size-adjust but I continue with the same problem.
Any idea? Maybe is a good idea for a Youtube video @Kevin too 🙂
16 Replies
My hack is to use
display: grid; and pair it with align-content: center; and justify-content: center;
You should also be able to use text-align: center; instead of justify-content: center;Thanks for your reply. I tried all the things that you told me but doesn't work. I tried in the parent element and also in the item but nothing 😦
Are these just simple block elements with a
border-radius applied?Same, but instead of 3 properties you can do
I prefer setting the margins but it's completely preference
Yes, but is no only there. Is in all my components. For example here same:
Are some px but I don't like
Try line-height: 1
Is not working. This is the website that I saw with this problem. You can check: https://primeng.org/avatar All the components, (go to BUTTON for example) are not centered correctly.
Angular Avatar Component
Avatar represents people using icons, labels and images.
It's probably the font then. Each font has unique spacings for each letter and that's something you can't change I don't think unless you go into the glyphs inside the font files and change them which you pretty much never want to do. Try it without the font-family applied and it will probably work as expected
Thanks for your reply. I tried and nothing. I changed to "Montserrat" and "Inter" and is not ok 😦
Can you send a codepen?
@zer0byte This is how it should look: https://jsfiddle.net/1pbea60w/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Admittedly I can't use the same elements as you without having your code to work from.
Thanks again. Can you try to do it with the web inspector? The link is this https://primeng.org/avatar. I tried there and I couldn't. And is not my website I only use that library and I noticed they have the problem
Sorry in this moment I can't but I tried some minutes ago with the inspector here https://primeng.org/avatar and I couldn't. Now I'm not in the laptop
Angular Avatar Component
Avatar represents people using icons, labels and images.
The only thing stopping it from working there is that the containing element needs
display: flex
And align-items: center
So whatever you have all of your elements in, apply to thatThanks. I noticed that in Linux I have the problem but if I'm in Windows, I can see the align better:
