How to horizontally align CSS :hover buttons inside a centered parent div?

Question

I can't find a similar problem to this one.

I want to have two CSS :hover buttons horizontally aligned in a centered parent div (orange div), but it isn't working.

Centering:
The cursor-activated area (purple border) expands far beyond the buttons, covering much of the page. How can I format the cursor-activated area to match the size of the buttons' source content:url() without destroying the centering of the parent div? Using something like position:absolute doesn't seem to be the right solution.

Horizontal alignment:
display: inline-block; works only if I change the div id #alpha a{ to #alpha{ and #beta a{ to #beta { .
This way the buttons horizontally align but then I lose their functionality.

See/edit the example here: http://dabblet.com/gist/0ec177e3a1191051cc3555ca958a6d20

A possible solution:
Certain styling is probably needed for :hover or something like a:hover so that the unexpectedly large cursor-activated area can be reduced to the same size as the button without effecting the centering from the parent div. I've had no luck with position:absolute .

Any insights?

 body { background-color: rgb(0,0,0); margin: 0px; border: 0px black; padding: 0px; } #parent { background-color: rgb(200,80,0) !important; width: 50vw; font-size: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } a{ border: 1px solid red !important; } :hover{ border: 1px solid purple !important; } #alpha a{ border: 1px solid black !important; max-width:7%; content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-A_130_130.jpg"); display: inline-block; } #alpha:hover a{ border: 1px solid yellow !important; max-width:7%; content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg"); display: inline-block; } #beta a{ border: 1px solid black; max-width:7%; content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-B_130_130.jpg"); display: inline-block; } #beta:hover a{ border: 1px solid yellow !important; max-width:7%; content: url("https://cdnimages.opentip.com/thumbs/VLL/VLL-LET-D_130_130.jpg"); display: inline-block; } 

 <div id=parent> <div id="alpha"><a href="#"></a> </div> <div id="beta"><a href="#"></a> </div> </div> 

Answer 1

Add this to #parent

            display: flex;
            align-items:center;
            justify-content: center;