0
我正在开发交互式地图。我有svg矢量地图本身和不同的按钮（内部链接divs），风格为圆圈。矢量，按钮和弹出窗口嵌套在div“地图”中。点击按钮链接打开弹出文本。问题是：我无法居中对齐按钮上的链接文本。文本居中，但位于按钮顶部。我试图用与现在的“div变体”相同的样式嵌套按钮内链接 - 这是我得到正常居中链接文本的唯一方法。但是，这种方法是无效的 - 对于IE不工作和MOZ文本对齐属性在按钮内不起作用
.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;
}<div class="map"><img src="../img/graph.svg">
\t \t \t
<div class="button-my"><a href="#my">Text</a></button>
\t \t
\t \t \t <div class="my" id="my"><a href=" \t
\t
http://www.my.com" target="_blank"><h1>Random pop-up text</h1>
\t \t \t \t </a>
\t \t \t \t <a class="close" href="#">×</a>
\t \t \t \t
\t \t </div></div>
太感谢你了，它的工作原理！ – Oletem
这可能是你对你的答案进行了更详细的阐述，原本做错了什么？ - 所以它可以帮助其他人，他们会从搜索中找到这个主题 – Farside
文本包装的高度是25px，但文本较小，所以它在文本下面产生了很多空白区域。将'line-heigth = height'放在垂直文本中心。 – br3t