[英]How to center text inside anchor tag
我希望我的锚标签看起来像一个按钮,并创建了这种风格的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;*/
}
它看起来像我想要的那样,但如何在锚标签内水平和垂直居中文本?
如果元素的高度是硬编码的,则line-height
和padding
工作,但我喜欢使用
{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
保持文本居中在高度可能改变的标签中。
要将文本水平居中对齐,垂直居中对齐,请尝试以下操作:
CSS:示例小提琴
.details-button{
//your existing styles
//height: 28px; <-- remove this entry
text-align: center;
padding: 6px 0;
}
首先,删除此样式声明; 这是无效的标记:
vertical-align: central;
接下来,添加以下内容以水平居中文本:
text-align: center;
最后,使您的高度自动,而不是行高声明,将填充设置为味道:
height:auto;
padding:3px 0;
应该这样做! 请务必删除无效声明,因为它可能会导致您的 CSS 在某些浏览器中中断。
简单的text-align: center;
在您现有的班级中。
这有效:
{
display: grid;
justify-content: center;
}
很简单,添加
text-align: center;
到您的目标班级。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.