html – 响应背景中的绝对中心文本

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

<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="#"> &lt; </a>
<a class="Next" href="#"> &gt; </a>

html – 响应背景中的绝对中心文本

解决方法

相关文章