CSS - 水平中心：箭头后

Question

我试图水平居中＆＃34;箭头＆＃34; ：在我之后但我没有设法做到这一点......

我的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，但我想要第一个Style（带灰色箭头，更大）

你能帮帮我吗？）

谢谢！

Answer 1

执行此操作的最佳方式right:0; left:0; margin:auto;在支持:before的所有浏览器中效果最佳。

Demo

.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;

    /* add these styles as well */

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

Answer 2

CSS3解决方案（calc()）

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

left: calc(50% - 16px);

JSFiddle demo

CSS2解决方案（margin）

如果没有CSS3的calc()功能，我们可以将left属性设置为50%，并使用{{1}将16px左侧的元素调整为margin-left }}

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

JSFiddle demo

替代CSS2解决方案（left和right）

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

auto

JSFiddle demo

Answer 3

尝试以下操作（CSS上有3个新行）。关于如何使绝对元素居中的更多here

.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
}

Answer 4

添加

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

到这个班级：

.menu-top table td.active a:before