CSS positioning issue
✅solved
front-end
front-endI have a rectangular container. I want a circle image to be positioned at the center, and a single-line text to be positioned just under the image, with maybe a small margin between the two.
First, to put the image in the center, i used :
I also pondered using :
Then, to place the text, as a patch solution, I placed it with a fixed position and bottom:33%, which barely passes the current (unfinished) state of my display. It also only works because my container happens to have a drop-shadow filter on it, making it behave as the containing element of the fixed, but that's very magic and unstable.
I suppose flex is out of the question if the text doesn't have fixed or absolute positioning, as it would mess up the positioning of the circle, moving it off center.
The ideal metric would be a top-margin in em between the text and the image. The idea of text overflowing (either from under or from the sides) is not a concern.
What would be an accurate way to position these two elements ? Would anchor positioning be a good solution in this case ? Both in terms of clean code, stability…
First, to put the image in the center, i used :
I also pondered using :
Then, to place the text, as a patch solution, I placed it with a fixed position and bottom:33%, which barely passes the current (unfinished) state of my display. It also only works because my container happens to have a drop-shadow filter on it, making it behave as the containing element of the fixed, but that's very magic and unstable.
I suppose flex is out of the question if the text doesn't have fixed or absolute positioning, as it would mess up the positioning of the circle, moving it off center.
The ideal metric would be a top-margin in em between the text and the image. The idea of text overflowing (either from under or from the sides) is not a concern.
What would be an accurate way to position these two elements ? Would anchor positioning be a good solution in this case ? Both in terms of clean code, stability…
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
