How to center this button?

1

I been trying diferents way, some dons’t work, other works but when i change widows size the button change the position.

CODEPEN: https://codepen.io/ricardonothing/pen/NWPZbVY

Help

Help2
Help2415×529 17 KB

Help3

2

What I did was created a div for your button link and that worked for me.

 <div class="btn__div">
            <a class="card__link" href="#">Click here!</a>
            </div>

.btn__div{
  text-align:center;
}

image

1 Like
3

You could also add these:

margin: 0 auto; // (centers elements)
display: block; // (starts on a new line and stretches out to the left and right as much as it can)
width: 50%; // (adjusts the display: block or how far you want it to stretch to the left and right)
4

You should prefer solution of @noblegas87, as you don’t want to explicitly assign width to a button that forms it’s width by padding values.

1 Like
5

Thanks, your solution its elegant. By the way, i don´t know how to deal with this centering stuff. Its complicated for me.