Html CSS-水平居中打开：在箭头之后

我试着水平居中箭头：在我的箭头上之后，但我没能做到

我的HTML

<div class="menu-top">
    <table>
        <tbody>
            <tr>
                <td> <a href="">Avant</a>

                </td>
                <td class="active"> <a href="">jambon</a>

                </td>
                <td class="active"> <a href="">Historique des transferts</a>

                </td>
                <td> <a href="">Testeuh</a>

                </td>
            </tr>
        </tbody>
    </table>
</div>

这是我的

我尝试了另一种风格，但我想有灰色箭头和更大的第一种风格

你能帮我吗

---

谢谢大家!

在CSS上尝试以下3行新代码。有关如何将绝对元素居中的详细信息

.menu-top table td.active a:before {
    content:'';
    z-index: 100;
    display: block;
    position: absolute;
    height: 0;
    overflow: hidden;
    top: 25px;
    border-top: 16px solid #dfdfdf;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    width: 32px; // width of the arrow
    left: 50%;
    margin-left: -16px; // half of width of the arrow
}

正确执行此操作的最佳方法：0；左：0；保证金：自动；将在所有支持的浏览器中工作得最好：在没有性能影响之前

CSS3溶液计算 使用CSS3的calc函数，我们可以将箭头定位到50%减去16px，其中16px等于箭头宽度的一半

左：calc50%-16px；

CSS2溶液裕度 如果没有CSS3的calc函数，我们可以将left属性设置为50%，并使用负的左边距将元素向左调整16px

左：50%； 左边距：-16px；

左侧和右侧的备选CSS2解决方案 正如Nick在comments中提到的，实现这一点的另一种方法是将left和right属性设置为0，并将边距设置为auto：

左：0； 右：0； 保证金：自动； .

只需添加

left:0;
right:0;
margin:0 auto;

对于这一类：

.menu-top table td.active a:before

---

好的，它是一个：：箭头之前，而不是一个：：箭头之后。不要使用表格作为菜单。这正是我们不使用表格进行布局的原因。使用div等替代-flexbox甚至可以做得更好！宽度：32px是不必要的px中留下的空白永远不会在最后一行工作，因为字符中文本的长度是非常不同的。尝试使用left:-20%；&左缘：40%；在最后两行中。它几乎使箭头居中，但不只是在那里。如果不需要计算，请始终使用该选项。左：0；右：0；保证金：0自动；如果你决定改变现状会更好image@HerrSerker想解释一下原因吗？@JamesDonnelly calc可能会使用更高性能的浏览器。当然还有“尼克”这个好主意。我在答案中加了这个。

left:0;
right:0;
margin:0 auto;

.menu-top table td.active a:before