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

时间:2018-06-10 03:44:09

标签: html css hover alignment centering

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

我希望在居中的父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>

1 个答案:

答案 0 :(得分:0)

将此添加到#parent

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