CODEWITHSUNDEEP
css
GobsRuiz
GobsRuiz

Reputation: 522

Text is not aligned on the button

it has a button that will be used to open a content. Then when it is opened, the button text is changed to "-" and when it closes to "+".

I can't use icons!

Anyway, the "-" or "x", are not aligned on the button. I've used flex display, tested several things and I can't, someone help me please

document.getElementById("btn").addEventListener("click", (event) => {
  let button = event.target;
  if (button.innerText == "-") {
    button.innerText = "+";
  } else {
    button.innerText = "-";
  }
})
* {
  margin: 0;
  padding: 0;
}

div {}

#btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border: 0;
  font-size: 40px;
  font-weight: 600;
  background-color: red;
}
<div id="div">
  <button id="btn">
            x
        </button>
</div>

Upvotes: 2

Views: 323

Answers (2)

AbsoluteBeginner
AbsoluteBeginner

Reputation: 2255

My suggestion:

button {
  background-color: red;
  border: 0;
  font-size: 28px;
  font-weight: bold;
  margin: 0 5px 0 5px;
  padding: 10px;
  vertical-align: middle;
  text-indent: 3px; /* for perfect horizontal centering, with some fonts */
}
<button>+</button>
<button>−</button>
<button>×</button>

Upvotes: 1

Ajith Gopi
Ajith Gopi

Reputation: 1826

You just have to add a width property.

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border: 0;
  font-size: 40px;
  background-color: red;
}
<button class="btn">+</button>
<br/>
<button class="btn">−</button>
<br/>
<button class="btn">×</button>

Notes:

  • The minus symbol is not the dash -, and the close symbol is also not X since they will be misaligned. Copy the symbol from the above code directly.

Symbol references

PS: Some code that is not in use in the answer have been removed from the snippet copied from question.

Upvotes: 1

Related Questions