Text-align property does not work inside button - html

Question

I am developing interactive map. I have svg vector map itself and different buttons(divs with link inside), styled as circles. Vector, buttons and pop-ups are nested in div "map". The click on button link opens the pop-up with text. The problem is: I cannot center-align the link text on a button.Text is centered, but sticks at the top of the button. I have tried to nest link inside button with same styling as my "div variant" has now - that is the only way i get normal centered link texts. But such way is invalid - doesnt work for IE and 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">
<div class="button-my">Text</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="#">×</a>
</div></div>

Answer 1

You need to either increase the line-height to 25px so it fills the height of the button, or increase the top padding to push the text down into position.
You should almost always avoid using height in CSS. In this case, it's better to change the height of the contents to achieve the height you want... then the height of the button will be determined from that (line-height + top padding + bottom padding).

Answer 2

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

Answer 3

add line height to a
.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">Text</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="#">×</a>
</div></div>