OnMouseOver; how to centre icons in updated code

from none to

Inline-block?

document.querySelector('#playButton2 .initial').style.display='inline-block';

None hides it, and inline-block shows it.

This fixed it.

<style>
#playButton2 {
    width: 79px; height: 79px; cursor: pointer; padding:0; border: 1px solid #0059dd;
    background-color: black; background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat; background-size: cover;
}
div:hover {
 display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid red;cursor: pointer;
}

.initial {
display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;
}


.pause {
display: none; margin: 0 auto;width: 36px;height: 36px;background-color: rgba(0,0,0,.7); background-image: url('https://i.imgur.com/5nQe2FE.png');background-repeat: no-repeat;background-position: 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;
}


.play {
  display: none; margin: 0 auto;width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;
}


</style>


<button id="playButton2"  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">

<div class="initial"> </div>

<div class="pause"> </div>

<div class="play" > </div>

</button>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

After I press the play button it shifts up, how do I fix that?

Link please.

Here:

After I click on it, it moves up.

The offsetTop of the initial is 28, whereas the offsetTop of the other ones are 27. Why would that be?

What do you mean?

Both png’s are 14 x 18

Inspect the image, (right-click, and inspect), got to properties,and down to offsetTop.
offsetTop controls how far down the element is shown from the top of the window.

You’ll see that offsetTop is at 28 for the initial image, and when you click it’s at 27 for the play and pause ones.

The problem is that the initial and hover states use block instead of inline-block.

I should also state, that the fix is to be consistent across all of the icons. Either use block for all of them or inline-block for all of them. I suggest that you use inline-block as the scripting also uses that too.

I fixed:

I think I only need to place


 display:inline-block; margin: 0 auto;

On initial, and that’s it, correct?

That reminds me. When you hover on pause, the hover style is showing the play image.

How to fix that - remove from the hover style everything except for the changes that need to occur. It should only be the border radius and the color that you’re left with there, which will work on all the icons.

And about my question?

About only needing to place
display:inline-block; margin: 0 auto;

on initial, and that’s it.

Try it out - what happens when what you were asking is done?

It’s in the middle with it not needing to be added. If it’s already in the middle, it doesnt need it then, right?