Boxes that fit text in CSS

Code Help
1

Hello,
So how would I make boxes that fit perfectly around the text in them?
This is the link to my project:
https://replit.com/@JohnnySuriano/My-Website
Thanks

2

You can use fit-content.

.myelement {
  height: fit-content;
  width: fit-content;
  padding: 1vmin;
}

All it does is make the element scale to fit its content. It’s a handy little value.

If this worked, please mark this post as the solution =)

3

So it half worked, it fit the text but also stopped text-align working, is there a way around this?

4

Try setting margin-right and margin-left to auto.

This is the full code:

.myelement {
  margin-right: auto;
  margin-left: auto;
  height: fit-content;
  width: fit-content;
  padding: 2vmin;
}

I added extra padding lol. You can see the demo here: https://replit.com/@OmegaOrbitals/Centering-fit-content-element?s=app

2 Likes
5

Works perfectly, Thanks!

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.