文本对齐属性在按钮内不起作用答案

【问题标题】：Text-align property does not work inside button文本对齐属性在按钮内不起作用
【发布时间】：2017-03-28 06:24:01
【问题描述】：

我正在开发交互式地图。我有 svg 矢量图本身和不同的按钮（内部带有链接的 div），样式为圆形。矢量、按钮和弹出窗口嵌套在 div "map" 中。单击按钮链接打开带有文本的弹出窗口。问题是：我无法将按钮上的链接文本居中对齐。文本居中，但粘在按钮的顶部。我试图将链接嵌套在按钮内，其样式与我的“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">
    			
    <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>

【问题讨论】：

标签： html css button svg text-align

【解决方案1】：

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

【讨论】：

这可能是您对答案的详细说明，最初做错了什么？ - 所以它可以帮助其他人，他们会从搜索中找到这个主题
text-wrapper的高度是25px，但是文字比较小，所以会在文字下面产生很多空白。放置line-heigth = height 使文本中心垂直对齐。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

将行高添加到 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"><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>

【讨论】：