+ 1

Centering with aspect ratio

So a few days ago, I learned a nice little trick about how to maintain the aspect ratio of an element, and wanted to apply it a new web project of mine. The thing with the aspect ratio even works as intended, but now my problem is that I am unable to center elements inside of those elements I applied the aspect ratio stuff to, because my usual way of applying top: 50; left: 50; transform: translate( -50%, -50% ); fails in this case. See this example code, it probably shows the issue better: https://code.sololearn.com/W4GkXa860rmn/?ref=app Now my question is, is there a generic way to have the <p> tag centered under these circumstances, or is there even a better way for maintaining the aspect ratio of the <div> tag?

4th Nov 2018, 12:57 AM
Shadow
Shadow - avatar
3 Réponses
+ 2
You could use display: flex with child element set to margin: auto https://code.sololearn.com/W2N5HN4fMe8E/?ref=app
4th Nov 2018, 1:06 AM
Calviղ
Calviղ - avatar
+ 2
Well, that looks convenient. And easy to apply. Thanks a bunch, Calviղ!
4th Nov 2018, 1:12 AM
Shadow
Shadow - avatar
+ 1
Use #foo { width: 20vw; height: 20vw; } You would not need the pseodo element #foo:before
4th Nov 2018, 1:27 AM
Calviղ
Calviղ - avatar