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/”””
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?
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.
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.