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

Posted 2023-03-05

【中文标题】响应式背景中的绝对中心文本

【英文标题】：absolute center text in responsive background

【发布时间】：2014-02-04 06:19:54

【问题描述】：

我需要垂直和水平居中的文本。我正在制作一个带有圆形背景的链接，我需要它响应式，并且不能将 line-height 设置为链接的高度。原因如下：

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;

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

【问题讨论】：

如果您对浏览器支持感到满意，我建议您查看 flexbox 解决方案。 - css-tricks.com/snippets/css/a-guide-to-flexbox

【参考方案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>

【讨论】：

附注非常感谢迈克尔，谢谢