ボタン内でテキスト整列プロパティが機能しない

Question

私は対話型マップを開発中です。私はsvgベクトルマップ自体と異なるボタン（内側のリンクを持つdiv）を持っていて、サークルとしてスタイリングされています。ベクター、ボタン、ポップアップはdivの "map"にネストされています。ボタンをクリックすると、テキスト付きのポップアップが開きます。問題は次のとおりです。ボタン上のリンクテキストを中央揃えにすることはできません。テキストは中央に配置されていますが、ボタンの上部に貼り付けられます。私は、 "div variant"と同じスタイルでボタンの内側にリンクを入れ子にしようとしました。これが、通常の中心のリンクテキストを得る唯一の方法です。 IE用のdoesntの仕事とあなたはそれがボタンの高さを埋めるように、25ピクセルにline-heightを増やす、またはトップを高めるためにどちらかの必要

.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="#">&times;</a> 
 
    \t \t \t \t 
 
    \t \t </div></div>

Answer 1

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

Answer 2

をMOZ - しかし、そのような方法が無効ですテキストを定位置に押し込むためのパディング。

ほとんどの場合、CSSではheightを使用しないでください。この場合、内容の高さを変更して高さを設定することをお勧めします。ボタンの高さはその高さから決定されます（行の高さ+上の埋め込み+下の埋め込み）。

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"> 
 
    \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="#">&times;</a> 
 
    \t \t \t \t 
 
    \t \t </div></div>