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

[GroovyMotion]

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: http://codepen.io/GroovyMotion/pen/EmDJg/

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!

[Paulie_D]

Add this to the button CSS

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

http://codepen.io/Paulie-D/pen/LaHei

As you are aware

  top:50%;
  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.

[GroovyMotion]

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%); :)

[Author]

Posts