我需要垂直和水平居中的文字.我正在使用圆形背景建立链接,我需要它响应,并且无法将行高设置为链接的高度.原因如下:
<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>