Html 如何将锚标记内的文本居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21444096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center text inside anchor tag
提问by Arsen Mkrtchyan
I want my anchor tag look like a button, and created this style JsFiddle
我希望我的锚标签看起来像一个按钮，并创建了这种风格的JsFiddle
.details-button {
background: linear-gradient(to bottom, #FFFFFF 0, #FAB149 2%, #F89406 100%) repeat scroll 0 0 transparent;
border: 1px solid #FAB149;
-ms-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px #999999;
-ms-box-shadow: 0 1px 2px #999999;
box-shadow: 0 1px 2px #999999;
color: #FFFFFF;
cursor: pointer;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: bold;
-ms-text-shadow: 0 -1px #099FDF;
text-shadow: 0 -1px #099FDF;
margin: 4px;
height: 28px;
width: 85px;
vertical-align: central;
align-items: center;
text-decoration: none;
font: menu;
display: inline-block;
/*padding: 6px 0 5px 18px;*/
}
It looks as I want, but how to center text horizontally and vertically inside anchor tag?
它看起来像我想要的那样，但如何在锚标签内水平和垂直居中文本？
回答by MarcinJuraszek
Add
添加
text-align: center;
line-height: 28px;
working demo: http://jsfiddle.net/3SE8L/2/
工作演示：http: //jsfiddle.net/3SE8L/2/
回答by badAdviceGuy
To align your text in the center horizontally and in the middle vertically, try this:
要将文本水平居中对齐，垂直居中对齐，请尝试以下操作：
CSS: Example Fiddle
CSS：示例小提琴
.details-button{
//your existing styles
//height: 28px; <-- remove this entry
text-align: center;
padding: 6px 0;
}
回答by code-sushi
First, remove this style declaration; it is invalid markup:
首先，删除此样式声明；这是无效的标记：
vertical-align: central;
Next, add this to center your text horizontally:
接下来，添加以下内容以水平居中文本：
text-align: center;
Finally, make your height auto and instead of a line-height declaration, set the padding to taste:
最后，使您的高度自动，而不是行高声明，将填充设置为味道：
height:auto;
padding:3px 0;
That should do it! Be sure to remove the invalid declaration as it can cause your CSS to break in some browsers.
应该这样做！请务必删除无效声明，因为它可能会导致您的 CSS 在某些浏览器中中断。
回答by Kat
line-heightand paddingwork if the height of the element is hard-coded, but I like to use
line-height和padding工作，如果该元素的高度是硬编码的，但我喜欢用
{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
to keep text centered in a tags where the height may change.
保持文本居中在高度可能改变的标签中。
回答by mellowfish
Simply text-align: center;in your existing class.
只需text-align: center;在您现有的班级中。
