html - CSS - :after arrow 水平居中

Question

我试图将“箭头”水平居中:在我的之后，但我没能做到...

我的 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

.menu-top {
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 20px;
}
.menu-top table {
    background: lightgrey;
    margin-top: 0;
    width: 100%;
    text-align: center;
}
.menu-top table td a {
    position: relative;
    font-size: 18px;
    color: #3f4348;
    text-shadow: 0 1px 0 #ffffff;
    display: inline-block;
    text-decoration: none;
    margin-right: 20px;
    margin-left: 20px;
}
.menu-top table td.active a:before {
    content:'';
    z-index: 100;
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
    top: 25px;
    border-top: 16px solid #dfdfdf;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
}

这是我的 JSFiddle

我尝试了另一种风格 here ，但我想要第一个样式(带灰色箭头和更大)

你能帮帮我吗:)

谢谢!

Answer 1

CSS3 解决方案(calc())

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

left: calc(50% - 16px);

JSFiddle demo .

CSS2 解决方案(边距)

如果没有 CSS3 的 calc() 函数，我们可以将 left 属性设置为 50% 并通过 将元素调整到左侧16px 使用负 margin-left。

left: 50%;
margin-left: -16px;

JSFiddle demo .

替代 CSS2 解决方案(left 和 right)

正如 Nick 在评论中提到的，另一种实现此目的的方法是将 left 和 right 属性都设置为 0，并设置margin 到 auto:

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

JSFiddle demo .