Html 如何水平居中对齐此绝对定位的`<；a>；`标记在相对定位的div中？

在下面的SSCCE中，我希望第5个

元素在中心水平对齐

我尝试了

align=“center”

HTML属性，以及

wrapper

div上的

text-align:center

CSS属性，但似乎没有任何效果

那我怎么才能让它工作呢如何水平对齐第5个“”元素？

注意：给定的代码就是一个示例。在真实的网页中，我总共可以有6个标签，在这种情况下，我希望将第二行的2个标签水平居中对齐；我可以有7个元素，在这种情况下，我必须将第二排的3个元素居中对齐…以此类推。任何行中的最大标记数（显然）为4

SSCCE-index.php

---

将链接放在p元素内部，如下所示：

.span-container {
    left: 10%;
    bottom: 10%;
    width: 80%;
}

.span-one {
    font-size: 271.579%;
    color: #FFF;
}

.span-two {
    font-size: 214.737%;
    color: #FFF;
    font-weight: 100;
    line-height: 0.9;
}

实现你想要的：

您需要更改css中的几个样式

第一个：添加

文本对齐：居中到您的
包装器
类

.wrapper {
    position:relative;
    width:90%;
    max-width:90%;
    margin: 0px auto;
    left:0px;
    right:0px;
    text-align: center;
}

.anchor {
    display: inline-block;
    width: 24%;
    height:300px;
    max-height: 400px;
    min-height: 190px;
    top: 0px;
    background-size: cover;
    background-position: center center;
    text-decoration: none;
    margin: 10px 0;
}

秒：更改
位置：绝对至
显示：内联块然后添加
宽度：24%在你的
锚定
类中

.wrapper {
    position:relative;
    width:90%;
    max-width:90%;
    margin: 0px auto;
    left:0px;
    right:0px;
    text-align: center;
}

.anchor {
    display: inline-block;
    width: 24%;
    height:300px;
    max-height: 400px;
    min-height: 190px;
    top: 0px;
    background-size: cover;
    background-position: center center;
    text-decoration: none;
    margin: 10px 0;
}

注意：现在可以删除css中的另一个
.anchorX
。例如，
.anchor1
、
.anchor2
和
.anchor3

Third:删除
span容器
和
span二类的不必要的
属性。它将如下所示：

.span-container {
    left: 10%;
    bottom: 10%;
    width: 80%;
}

.span-one {
    font-size: 271.579%;
    color: #FFF;
}

.span-two {
    font-size: 214.737%;
    color: #FFF;
    font-weight: 100;
    line-height: 0.9;
}

这是最新消息。



提醒：如果要使用
max width
属性，请将
width
属性设置为不超过
max width
值



更新：

将
span容器
类与
锚点
类的底部对齐。添加
位置：相对锚定
类中添加
位置：绝对span容器
类中的code>

.wrapper {
    position:relative;
    width:90%;
    max-width:90%;
    margin: 0px auto;
    left:0px;
    right:0px;
    text-align: center;
}

.anchor {
    display: inline-block;
    width: 24%;
    height:300px;
    max-height: 400px;
    min-height: 190px;
    top: 0px;
    background-size: cover;
    background-position: center center;
    text-decoration: none;
    margin: 10px 0;
}

已更新。




希望能有所帮助。
你知道，我不明白为什么这不如给a元素一个align属性那么简单……你知道，我在问题中写了一个小的SSCCE（这是一个完整的示例项目），这样你就可以在机器上复制代码并运行它，以防你产生类似的疑问。我在问题中已经提到，
align
或
text align
不起作用<代码>边距：0自动
也不起作用。这破坏了
.span容器的对齐。它通过
bottom:10%与左下角对齐；左：10%。现在这似乎不起作用，而且似乎与顶部一致。如果你能为此提出一些建议，我将不胜感激。我没有否决你的答案，我只是把它投了更高的票。我也接受了你的答案，但删除了它只是为了再次提出问题。一旦问题得到解决，我将再次接受它。=）