Guys I need a little help with this code. Your help is much appreciated.

Question

I was trying to recreate the "Initializing..." animation for Python on SoloLearn, when I found out there was a small error. When the Python Logo keeps zooming in and out, the text moves with it, but I want its position fixed. How do I overcome this bug? Thank You!
https://code.sololearn.com/WPP9O2QJEAD6/?ref=app

Answer 1

Wrap your image in a fixed height container.

<p style="height: 170px;">
<img...>
</p>

While you can set the position of your paragraph to be absolute, attempting to position it to the center, for different screen sizes, is cumbersome.

P.S. To look more like the actual thing:

<p style="height: 180px; vertical-align: middle; display: table-cell">
<img...>
</p>

Answer 2

You can just modify the p tag and use position property, set the value to absolute and set top and left like this.
and it's position will be Fixed.

<p style="font-family: Sans-Serif; font-size: 20px; color: grey; position: absolute; top: 40%; left:35%;" align="center">Initializing...</p>

Answer 3

I think it is perfectly fine! it looks better with the text moving with it! no worries! 😉👍