Question

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

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

定心：
光标激活区域（紫色边框）远远超出按钮，覆盖了大部分页面。如何格式化光标激活区域以匹配按钮源content:url()的大小而不破坏父div的居中？使用像position:absolute这样的东西似乎不是正确的解决方案。

水平对齐：
display: inline-block;仅在我将div #alpha a{更改为#alpha{而#beta a{更改为#beta {时才有效。
这样按钮水平对齐，但后来我失去了功能。

在此处查看/编辑示例： 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;

如何在居中的父div中水平对齐CSS：悬停按钮？

1 个答案: