Ask coding questions

← Back to all posts
image not aligning center
ch1ck3n (1621)

I'm trying to align the animated GIF that looks like a road to exactly the center of the page but it's not working

I like everything else how it is but the road is not aligning to the center of the page.

the id is #road

and the css of it is in line 73

HTML is in line 27

any help would be appreciated

thank you

Answered by SixBeeps (5057) [earned 5 cycles]
View Answer
SixBeeps (5057)

The align property isn't a thing.
See the "Center an Image" section of this page

ch1ck3n (1621)

@SixBeeps ew w3schools

i now have

  position: absolute;
  top: 160px;
  /* left:539px; */
  z-index: -10;
  margin-left: auto;
  margin-right: auto;
  display: block;

as the css.

it still doesn't work


ch1ck3n (1621)

@SixBeeps i know the problem is position:absolute

but if I remove that the road won't be overlapping with the car thing

SixBeeps (5057)

@ch1ck3n w3schools is decent wdym

There are a few different routes you can take to keep the chicken on the road.
The one that first comes to mind is putting the chicken inside the road container and making the road container put all of its elements on top of each other (using flex magic probably)
Another solution would be to programatically position the left coordinate of the road using JS, though that'd get complicated really quickly.

ch1ck3n (1621)

@SixBeeps hm ok

here's 5 cycles for you