Position anchor tag in the middle of masonry-brick

Question

I'm trying to position an anchor tag in the middle of each of my masonry bricks but I'm having a trouble with centering it vertically since 50% of the height is not the actual height of the brick (I don't know why). The height of the anchor tag is 46px so this is my css for the anchor tags:

masonry-brick a
{
    height: 46px;
    width: 46px;
    display: block;
    /* Firefox */
    margin-left: -moz-calc(50% - 23px);
    margin-top: -moz-calc(50% - 23px);
    /* WebKit */
    margin-left: -webkit-calc(50% - 23px);
    margin-top: -webkit-calc(50% - 23px);
    /* Opera */
    margin-left: -o-calc(50% - 23px);
    margin-top: -o-calc(50% - 23px);
    /* Standard */
    margin-left: calc(50% - 23px);
    margin-top: calc(50% - 23px);
    position: absolute;
}

but this is what it actually does: enter image description here

When I check what 100% does I see this: enter image description here

What am I doing wrong?

Thank you, Mila

Possible duplicate - http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div — Paulie_D, Nov 22 '14 at 14:05

score 1 · Answer 1 · answered Nov 22 '14 at 14:45

1

top: -webkit-calc(50% - 23px);

instead of

margin-top: -webkit-calc(50% - 23px);

Solved the issue

answered Nov 22 '14 at 14:45

mila

701
4
16

Position anchor tag in the middle of masonry-brick

1 Answers1