How to align a button beneath a gif?

Question

I've some text, then a gif (treated as an image) and then a button. But the gif overlaps the button, so you can't see it anymore. How can I align it so that the button is a line under the gif instead of being covered by it?

I looked through some solutions, one used block:inline in CSS, but my gif should be hidden in the beginning and only appear after an action. Everything is aligned centered.

Answer 1

Ok. My solution is:

1. remove the position 'absolute' of the gif image.
2. add a style rule for the tryagain button like this:

#tryagain {
margin-left: auto;
margin-right: auto;
}

Answer 2

You can use the css solution like this:

img#mygif {
display: none;
}

then use javascript to change it after the action:

function doAction(){
....
document.getElementById('mygif').style.display = 'block'
}

Answer 3

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

I'm talking about what happens when you run the program and click 'escape' on the first button. There should be a 'Try Again' button under the gif

Answer 4

Of course, let me see if it works!

Answer 5

@Ulisses Cruz Unfortunately, changing it to a block doesn't help.
@Kainier ratsõ ._.

If you need to see my code to give a solution, then I'll post it in

Answer 6

Yes, it works! Thank you so much!

Answer 7

Yes it would be better. If you put it in the code playground and then post a link to it here is even better.