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
DJR
DJR•17mo ago
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;
ZeR0ByTe
ZeR0ByTe•17mo ago
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 😦
DJR
DJR•17mo ago
Are these just simple block elements with a border-radius applied?
vince
vince•17mo ago
Same, but instead of 3 properties you can do
.parent {
display: grid;
}

.child {
margin: auto;
}
.parent {
display: grid;
}

.child {
margin: auto;
}
I prefer setting the margins but it's completely preference
ZeR0ByTe
ZeR0ByTe•17mo ago
Yes, but is no only there. Is in all my components. For example here same: Are some px but I don't like
vince
vince•17mo ago
Try line-height: 1
ZeR0ByTe
ZeR0ByTe•17mo ago
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.
vince
vince•17mo ago
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
ZeR0ByTe
ZeR0ByTe•17mo ago
Thanks for your reply. I tried and nothing. I changed to "Montserrat" and "Inter" and is not ok 😦
vince
vince•17mo ago
Can you send a codepen?
DJR
DJR•17mo ago
@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.
DJR
DJR•17mo ago
Admittedly I can't use the same elements as you without having your code to work from.
ZeR0ByTe
ZeR0ByTe•17mo ago
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
ZeR0ByTe
ZeR0ByTe•17mo ago
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.
DJR
DJR•17mo ago
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 that
ZeR0ByTe
ZeR0ByTe•17mo ago
Thanks. I noticed that in Linux I have the problem but if I'm in Windows, I can see the align better:
Want results from more Discord servers?
Add your server