Text inside button not aligning

Question

So I'm trying to center the text in a button but somehow text-align: center; is not working.

Anyone got an idea?

HTML:

<div class="buttons">

    <div id="base">
      <button class='button' data-next="games" data-parent="base">Games</button>
      <button class='button' data-next="work" data-parent="base">Work</button>
    </div>

    <div id="games" class="hidden">
      <button class='button' data-next="games-heavy" data-parent="games" final-answer="games-heavy1">Heavy Games</button>
      <button class='button' data-next="games-light" data-parent="games" final-answer="games-light1">Light Games</button>
    </div>

    <div id="work" class="hidden">
      <button class='button' data-next="work-heavy" data-parent="work" final-answer="work-heavy1">Heavy Apps</button>
      <button class='button' data-next="work-light" data-parent="work" final-answer="work-light1">Light Apps</button>
    </div>

    <p id="games-heavy" class="hidden">Heavy games</p>
    <p id="games-light" class="hidden">Light games</p>
    <p id="work-heavy" class="hidden">Heavy applications</p>
    <p id="work-light" class="hidden">Light applications</p>

</div>

CSS:

.buttons {
    border: none;
    width: 99%;
}

.button {
    margin: .3rem;
    display: flex;
    flex-direction: column;
    color: white;
    background-color: blue;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    text-decoration: none;
    font-size: .9rem;
    text-align: center;
    width: 100%;
    border: 0;
}

Can you share a screenshot of what it looks like for you? Seems to be centering for me — Shahzad, Dec 31 '19 at 13:19
Did you notice that all the 'button' classes in the html tags are in single quotes whereas everything else is in double quotes? — half of a glazier, Dec 31 '19 at 13:19
@Still_learning: That doesn't matter. Either single or double quotes will work. — Alexander van Oostenrijk, Dec 31 '19 at 13:21
@AlexandervanOostenrijk I know but it's good practice to be consistent within the same file — half of a glazier, Dec 31 '19 at 13:22
Does this answer your question? [Centering text within a button](https://stackoverflow.com/questions/32188383/centering-text-within-a-button) — Awais, Dec 31 '19 at 13:22
No, it does note since that link does not use flex. I've found the answer, provided the answer also in the answer column. Thanks all! — number42, Dec 31 '19 at 14:23

score 3 · Answer 1 · answered Dec 31 '19 at 13:20

3

align-items:center because you are using flex.

answered Dec 31 '19 at 13:20

Rob

14,746
28
47
65

score 1 · Answer 2 · answered Dec 31 '19 at 13:22

Remove display:flex and flex-direction from your css.

.buttons {
    border: none;
    width: 99%;
  }

  .button {
    margin: .2rem;
    color: white;
    background-color: blue;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    text-decoration: none;
    font-size: .9rem;
    text-align: center;
    width: 100%;
    border: 0;
  }

<div class="buttons">

  <div id="base">
    <button class='button' data-next="games" data-parent="base">Games</button>
    <button class='button' data-next="work" data-parent="base">Work</button>
  </div>

  <div id="games" class="hidden">
    <button class='button' data-next="games-heavy" data-parent="games" final-answer="games-heavy1">Heavy Games</button>
    <button class='button' data-next="games-light" data-parent="games" final-answer="games-light1">Light Games</button>
  </div>

  <div id="work" class="hidden">
    <button class='button' data-next="work-heavy" data-parent="work" final-answer="work-heavy1">Heavy Apps</button>
    <button class='button' data-next="work-light" data-parent="work" final-answer="work-light1">Light Apps</button>
  </div>

  <p id="games-heavy" class="hidden">Heavy games</p>
  <p id="games-light" class="hidden">Light games</p>
  <p id="work-heavy" class="hidden">Heavy applications</p>
  <p id="work-light" class="hidden">Light applications</p>

</div>

score 1 · Accepted Answer · answered Dec 31 '19 at 13:23

add justify-content: center instead of text-align: center and also remove flex-direction css

.buttons {
    border: none;
    width: 99%;
}

.button {
    margin: .3rem;
    display: flex;
    color: white;
    background-color: blue;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    text-decoration: none;
    font-size: .9rem;
    justify-content: center;
    width: 100%;
    border: 0;
}

<div class="buttons">

            <div id="base">
              <button class='button' data-next="games" data-parent="base">Games</button>
              <button class='button' data-next="work" data-parent="base">Work</button>
            </div>

            <div id="games" class="hidden">
              <button class='button' data-next="games-heavy" data-parent="games" final-answer="games-heavy1">Heavy Games</button>
              <button class='button' data-next="games-light" data-parent="games" final-answer="games-light1">Light Games</button>
            </div>

            <div id="work" class="hidden">
              <button class='button' data-next="work-heavy" data-parent="work" final-answer="work-heavy1">Heavy Apps</button>
              <button class='button' data-next="work-light" data-parent="work" final-answer="work-light1">Light Apps</button>
            </div>

            <p id="games-heavy" class="hidden">Heavy games</p>
            <p id="games-light" class="hidden">Light games</p>
            <p id="work-heavy" class="hidden">Heavy applications</p>
            <p id="work-light" class="hidden">Light applications</p>

        </div>

score 0 · Answer 4 · answered Dec 31 '19 at 13:22

I just got the answer.

I was setting my buttons individually to:

display: flex;
flex-direction: column;

Which also set the alignment of the text and did not accept the text-align: center; because of it.

I moved

display: flex;
flex-direction: column;

to the <div class="buttons"> which owned all the buttons and it worked.

Sorry all!

Text inside button not aligning

4 Answers4