按钮

Question

我正在开发交互式地图。我有svg矢量地图本身和不同的按钮（里面有链接的div），样式为圆圈。矢量，按钮和弹出窗口嵌套在div＆＃34; map＆＃34;中。单击按钮链接将打开带有文本的弹出窗口。问题是：我无法将链接文本居中对齐到按钮上。文本居中，但粘在按钮的顶部。我试图用与我的＆＃34; div变体＆＃34;相同的样式嵌套内部按钮。现在已经 - 这是我获得正常中心链接文本的唯一方法。但这种方式无效 - 对IE和Moz不起作用

＆＃13;

＆＃13;

.button-my{width:25px;
    height:25px;
    border-radius: 50%;
    text-decoration:none;
    background: #FFC651 !important ;
    text-align: center;
    color: #FFC651 !important;
    font-family: 'Roboto', sans-serif !important;;
    font-size: 20%;
    top: 34%;
    left: 49%;
    position: absolute;
    margin: 0 !important;
padding: 0 !important;
    border: none !important;
    -webkit-animation: rainbow 2s infinite;}
@-webkit-keyframes rainbow {
0% {opacity: 1}
50% {opacity: 0.5}
100% {opacity: 1} 
    }



.button-my:hover {
  transform: scale(4);
    transition: all .5s ease-in-out;
    z-index: 5;
-webkit-animation: none;
}


.my{
    display: inline-block;
    top: 33%;
    left: 45%;
    background-color: #00C3D1;

    opacity: 0.5;
    position: absolute;
    padding: 0,5%;
    visibility: hidden;
    opacity: 0;
    width:10%;
    border-radius: 5%;
    transition: opacity 800ms;
    z-index: 5;
    }
.my:target {
  visibility: visible;
  opacity: 0.9;
}

a{
    text-decoration: none;
    color: white !important;
    padding: 0 !important;
    text-align: center !important;
    margin: auto;
}
a:hover{
    text-decoration: underline;
}

div{
    z-index: 5;
}

.map{
    position: relative;
    margin-left: auto;
    margin-right: auto;

}

＆＃13;

<div class="map"><img src="../img/graph.svg">
    			
    <div class="button-my"><a href="#my">Text</a></button>
    		
    			<div class="my" id="my"><a href="	
    	
    http://www.my.com" target="_blank"><h1>Random pop-up text</h1>
    				</a>
    				<a class="close" href="#">&times;</a>
    				
    		</div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将line-height增加到25px，使其填充按钮的高度，或者增加顶部填充以将文本向下推到位。

您几乎应该总是避免在CSS中使用height。在这种情况下，最好更改内容的高度以达到您想要的高度...然后按钮的高度将由此确定（行高+顶部填充+底部填充）。

Answer 2

.button-my {
    width: 25px;
    height: 25px;
    line-height: 25px;
    ...
}

Answer 3

将行高添加到

   .button-my a{
          line-height: 25px;
    }

.button-my{width:25px;
    height:25px;
    border-radius: 50%;
    text-decoration:none;
    background: #FFC651 !important ;
    text-align: center;
    color: #FFC651 !important;
    font-family: 'Roboto', sans-serif !important;;
    font-size: 20%;
    top: 34%;
    left: 49%;
    position: absolute;
    margin: 0 !important;
padding: 0 !important;
    border: none !important;
    -webkit-animation: rainbow 2s infinite;}
@-webkit-keyframes rainbow {
0% {opacity: 1}
50% {opacity: 0.5}
100% {opacity: 1} 
    }



.button-my:hover {
  transform: scale(4);
    transition: all .5s ease-in-out;
    z-index: 5;
-webkit-animation: none;
}

.button-my a{
      line-height: 25px;
}


.my{
    display: inline-block;
    top: 33%;
    left: 45%;
    background-color: #00C3D1;

    opacity: 0.5;
    position: absolute;
    padding: 0,5%;
    visibility: hidden;
    opacity: 0;
    width:10%;
    border-radius: 5%;
    transition: opacity 800ms;
    z-index: 5;
    }
.my:target {
  visibility: visible;
  opacity: 0.9;
}

a{
    text-decoration: none;
    color: white !important;
    padding: 0 !important;
    text-align: center !important;
    margin: auto;
}
a:hover{
    text-decoration: underline;
}

div{
    z-index: 5;
}

.map{
    position: relative;
    margin-left: auto;
    margin-right: auto;

}

<div class="map"><img src="../img/graph.svg">
    			
    <div class="button-my"><a href="#my">Text</a></button>
    		
    			<div class="my" id="my"><a href="	
    	
    http://www.my.com" target="_blank"><h1>Random pop-up text</h1>
    				</a>
    				<a class="close" href="#">&times;</a>
    				
    		</div></div>