As I dive into learning CSS, I am working on properly positioning elements. Currently, I have an HTML and CSS setup that creates a design resembling the Android robot. There's a functionality for the head where hovering over it changes its width to 300px. However, this causes the eyes to become uncentered. How can I keep the eyes centered during the hover event?
EDIT: Additionally, in the .eyes section of the CSS file, I noticed that simply using display: flex
centers the eyes. I initially thought that I would need to add align_items: center
to achieve the centering effect across the cross axis, but surprisingly, just setting display to flex did the trick.
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.robots {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Rest of the CSS code here */
<!-- Related HTML Code Here -->