Center an inline element that is a button

Question

I was making a button, and it was completely fine and centered until i discovered a glitch where I could click anywhere on that line to go to index.html (the button was linking to index.html). My first idea was to change the display attribute to inline opposed to block. Yet, the inline button won't center.

Code I had before:

.back {
  color: black;
  border-color: black;
  background-color: white;
  font-family: sans-serif;
  border-style: solid;
  border-width: 6px;
  display: block;
  font-size: 35px;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-radius: 20px;
}
.back:hover {
  transition-duration: .4s;
  background-color: black;
  color: white;
}

Code I have now:

.back {
  color: black;
  border-color: black;
  background-color: white;
  font-family: sans-serif;
  border-style: solid;
  border-width: 6px;
  display: inline;
  font-size: 35px;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  border-radius: 20px;
}
.back:hover {
  transition-duration: .4s;
  background-color: black;
  color: white;
}

See, it's exactly the same except for the inline.
Useful note: I did look up 'how to center a button' and I tried the w3schools way, but that just produced a big visual glitch.
Here's the HTML
HTML:
<a href="index.html"><button class="back">Back to homepage</button><a>

FIXED: left: 35%, position: absolute;

Using `display: inline-block` for a button is always best practise, outside the button it is an inline button and inside the button it is a block element. Then inside you can use more vertical css like height, padding-top/bottom, etc. Outside the button it is the inline element you want to use. — bron, Nov 28 '20 at 14:47
hhhmm, how can that center it? Also, oddly, on index.html I used a .menu class and it has the exact same attributes, meaning it's a problem with the html — Doglet, Nov 28 '20 at 14:53
Did you give the parent of the button a `text-align: center` — bron, Nov 28 '20 at 14:53
if using the block, then the solution is `.back { display: block; width: 30%; margin: 0 auto; }` — bron, Nov 28 '20 at 14:56

Center an inline element that is a button

0 Answers0