我找不到与此相似的问题。
我希望在居中的父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>
答案 0 :(得分:0)
将此添加到#parent
display: flex;
align-items:center;
justify-content: center;