[英]How to horizontally align CSS :hover buttons inside a centered parent div?
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. 我想在居中的父div(橙色div)中水平对齐两个CSS
:hover
按钮,但是它不起作用。
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? 如何在不破坏父div居中的情况下格式化光标激活区域以匹配按钮源
content:url()
的大小content:url()
? Using something like position:absolute
doesn't seem to be the right solution. 使用诸如
position:absolute
类的东西似乎不是正确的解决方案。
Horizontal alignment: 水平对齐:
display: inline-block;
works only if I change the div id #alpha a{
to #alpha{
and #beta a{
to #beta {
. 仅当我将div id
#alpha a{
更改为#alpha{
且将#beta a{
更改为#beta {
。
This way the buttons horizontally align but then I lose their functionality. 这样,按钮在水平方向对齐,但随后我失去了功能。
See/edit the example here: http://dabblet.com/gist/0ec177e3a1191051cc3555ca958a6d20 在此处查看/编辑示例: 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. 某些造型大概需要
:hover
或类似的东西a:hover
,使得出乎意料的大光标激活区可以减少到相同大小的按钮不影响从父DIV定心。 I've had no luck with position:absolute
. 我的
position:absolute
没有运气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>
Add this to #parent 将此添加到#parent
display: flex;
align-items:center;
justify-content: center;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.