Question

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

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;

它不起作用。如何让我的文本在链接的响应背景中绝对居中？

Answer 1

vertical-align CSS属性指定内联或表格单元格框的垂直对齐方式。意思是，您需要声明锚点显示为table-cell以使用vertical-align。

尝试将display: inline-block更改为display: table-cell。您还需要删除浮动并更改父级以显示为表格（或在锚点周围添加一个新的父级，并在其上添加display:table。）

看看这个小提琴：http://jsfiddle.net/myPTU/2/

请记住，这将使您获得所需的文本垂直和水平居中的结果，这可能会破坏锚点在页面上的定位方式。您可能需要为父元素重新设计样式，直到获得所需的结果。

附注：您应该将<a>代码之间的大于号和小于号的字符编码为>和<。

例如：

<a class="Previous" href="#"> &lt; </a>
<a class="Next" href="#"> &gt; </a>

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

1 个答案: