The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] button absolute position not working with padding, moves to the right

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #168028

    I have a button, well an inline-link or a “fake button” and I want it centered on an image, which has a relative position. The only way it’s perfectly centered is with a margin-right of 50% but if I add padding to the button then it’s position of 50% starts from it’s left so it makes it off-center.

    Here is a pen:

    Oh…also, if I resize the screen, then the top 50% doesn’t work and at lower res it is pushed down!

    Thanks in advance, as usual!


    Add this to the button CSS

    transform:translate(-50%, -50%);

    As you are aware

      left: 50%;

    will get to most of the way but it positions the button’s top left corner at that point.

    What is needed is a method to push the button back half it’s width & height. If you know the dimensions this can be done with negative margin (or adjusting the positioning value but I prefer the margin method).

    If you don’t know the dimensions (because the text is variable or dynamic) then the transform:translate method is based on the objects own calculated dimensions and, bingo!

    CSS3 of course but browser support is pretty good.


    Ah! Thanks again @Paulie_D :)

    edit it doesn’t work in chrome. It goes back to the right like before.

    edit ah of course, ye ‘old vendor prefix! -webkit-transform:translate(-50%, -50%); :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.