如何水平对齐 CSS :hover buttons inside a centered parent div?

Question

我找不到与此类似的问题。

我想要两个 CSS :hover 按钮在居中的父级 div（橙色 div）中水平对齐，但它不起作用。

居中：
光标激活区域（紫色边框）扩展到按钮之外，覆盖了大部分页面。如何格式化光标激活区域以匹配按钮源 content:url() 的大小而不破坏父 div 的居中？使用 position:absolute 之类的方法似乎不是正确的解决方案。

水平对齐方式：
display: inline-block; 仅当我将 div id #alpha a{ 更改为 #alpha{ 并将 #beta a{ 更改为 #beta { 时才有效。
这样按钮水平对齐但随后我失去了它们的功能。

See/edit这里的例子： http://dabblet.com/gist/0ec177e3a1191051cc3555ca958a6d20

可能的解决方案：
:hover 或类似 a:hover 可能需要某些样式，以便意外大的光标激活区域可以减小到与按钮相同的大小，而不会影响父 div 的居中. position:absolute.

我运气不好

有什么见解吗？

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

将此添加到#parent

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

如何水平对齐 CSS :hover buttons inside a centered parent div?

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

html

css

alignment

hover

centering