html - 按钮内的文字未对齐

Question

所以我试图将按钮中的文本居中，但不知何故 text-align: center; 不起作用。

有人知道吗？

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

Answer 1

align-items:center 因为你使用的是 flex。