Why vertical-align in this code doesnt work?

Question

<style> #test {width: 60%; aspect-ratio: 1 / 1; left: 20%; vertical-align: middle;} </style>

Answer 1

It depends on what element you try to align. Have a look at the documentation and note that it is supposed to align inline elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align?retiredLocale=en

Answer 2

JonySVK
I have never used vertical-align. Doing some tests...

https://code.sololearn.com/Wcg2nSJgkt9N/?ref=app

Answer 3

Lisa I want to align the square div exactly to the center of the page.

Answer 4

https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/

What you want is probably the flexbox method.

Answer 5

Lisa I wrote this:
#test {
width: 60%;
aspect-ratio: 1 / 1;
left: 20%;
display: flex;
justify-content: center;
background-color: green;
position: fixed;
overflow: scroll;
z-index: 1000000;
}

But it still doesn't work. What else am I missing?

Answer 6

the container element needs to be a flexbox

Answer 7

Lisa Can you please advise me how to do it? Thank you.

Answer 8

Read the tutorial at the subheading "How to Center Both Vertically and Horizontally"

Link your code if you need help with your code.

Answer 9

I already found a way to do it. Thank you very much for your help, Lisa.