CODEWITHSUNDEEP
htmlcss
Zagloo
Zagloo

Reputation: 1387

CSS - Horizontal center on :after arrow

I'm trying to center horizontally the "arrow" :after on my but I don't manage to do it...

My 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>

My 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;
}

This is my JSFiddle

I tried with an other style here, but I would like to have the first Style (with grey arrow and more bigger)

Can you Help me please :)

Thank you !

Upvotes: 0

Views: 2243

Answers (4)

Teknotica
Teknotica

Reputation: 1136

Try the following (3 new lines on your CSS). More here about how to center an absolute element

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

Upvotes: 1

4dgaurav
4dgaurav

Reputation: 11506

The best way to do this right:0; left:0; margin:auto; will work best in all browsers that supports :before no performance hit as well.

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

Upvotes: 3

Philip
Philip

Reputation: 395

Just add

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

to this class:

.menu-top table td.active a:before

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

CSS3 Solution (calc())

With CSS3's calc() function we can position our arrow to 50% minus 16px (where 16px is equal to half of the arrow's width).

left: calc(50% - 16px);

JSFiddle demo.

CSS2 Solution (margin)

Without CSS3's calc() function we can set the left property to 50% and adjust the element to the left by 16px using a negative margin-left.

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

JSFiddle demo.

Alternative CSS2 Solution (left and right)

As mentioned by Nick in comments, another way to achieve this is by setting both the left and right properties to 0, and setting the margin to auto:

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

JSFiddle demo.

Upvotes: 3

Related Questions