CODEWITHSUNDEEP
htmlcss
number42
number42

Reputation: 107

Text inside button not aligning

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;
}

Upvotes: 0

Views: 1076

Answers (4)

Nethra
Nethra

Reputation: 609

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>

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

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>

Upvotes: 1

number42
number42

Reputation: 107

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!

Upvotes: 0

Rob
Rob

Reputation: 15160

align-items:center because you are using flex.

Upvotes: 3

Related Questions