我需要垂直和水平居中的文字.我正在使用圆形背景建立链接,我需要它响应,并且无法将行高设置为链接的高度.原因如下:
<a class="PrevIoUs" href="#"> < </a> <a class="Next" href="#"> > </a>
CSS
a.PrevIoUs,a.Next { float: left; text-decoration: none; color: #fff; width: 8%; height: 0; padding-bottom: 8%; margin: 0 2% 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: inline-block; background: black; text-align: center; vertical-align: middle; }
我试过了
line-height: 0;
这是行不通的.如何让我的文本在链接的响应背景中绝对居中?
解决方法
vertical-align CSS属性指定内联或表格单元格框的垂直对齐方式.意思是,您需要声明锚点显示为表格单元格以使用vertical-align.
尝试更改display:inline-block to display:table-cell.您还需要删除浮动并更改父级以显示为表格(或者在锚点周围添加一个新的父级,并在其上显示:表格.)
看看这个小提琴:http://jsfiddle.net/myPTU/2/
请记住,这将获得所需的文本垂直和水平居中的结果,它可能会破坏锚点在页面上的定位方式.在获得所需结果之前,您可能需要为父元素重新设计样式.
附注:您应该在< a>之间对大于号和小于号的字符进行编码.标签为& gt;和& lt;.
例如:
<a class="PrevIoUs" href="#"> < </a> <a class="Next" href="#"> > </a>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。