Unable to centre content inside ancor element

unable to centre content inside anchor element, the only way I could make it work is to give an approximate padding-top. is there any other way?


link to code

this is the html part:-
““a id=“showallworkbtn” href=“https://codepen.io/ghostakbar/”””

Another way to do it is to add a line-height: 30px; to your button’s rules. There are many other ways too, like using flexbox and whatnot.

1 Like

Hi @ghostakbar,

Getting your text in the middle of a button is always a bit tricky. You could try to make the padding-top a little bit smaller than the padding-bottom.

Another solution:
You’ve used a link-tag and turned into a button. But it’s better to use a real button <button></button>. Just wrap it around the <a></a>.

Then you can copy/paste your id to this button, so it uses all the styling you already made.
Leave the width out and use padding on<a> to change the width of the button. That way the whole width will be clickable.

Oh, and a background-color: transparent on the <a> makes it possible to style just the<button> behind it.

Good luck.

Instead of giving the button a height you can also just use padding. top/bottom for the height, and left/right for the width.

another method…

make the anchor tag a flexbox, then center with flexbox properties. keep in mind that an anchor tag is inline by default. changing it to display: block or display: inline-block may help.

1 Like