Как расположить подсчет голосов под кнопкой голосования?

Question

Я новичок, пытающийся создать страницу голосования для музыкального исполнителя.Я не понимаю, как разместить текст подсчета голосов под кнопкой голосования.Если есть что-то еще, что я могу улучшить в своем коде, пожалуйста, дайте мне знать.

Я пробовал разные поплавки и дисплеи, но я не совсем уверен, что я делаю.

p {
  color: black;
  padding: 5px 0 5px 5px;
}

h3 {
  padding: 0 0 10px 10px;
}

.bart {
  height: 200px;
  width: auto;
  float: right;
  padding: 30px 30px 0 0;
}

button {
  list-style: none;
}

td {
  display: flex;
  align-items: center;
  justify-content: center;
}

<img class="bart" src="bart.gif">
<div class="artist-list">
  <ul class="artist">
    <table>

      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="coleclick()"><li>J.Cole</li></button>
        <p>Votes: <a id="cole">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="slipknotclick()"><li>Slipknot</li></button>
        <p>Votes: <a id="slipknot">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="amineclick()"><li>Amine</li></button>
        <p>Votes: <a id="amine">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="daveClick()"><li>Dave</li></button>
        <p>Votes: <a id="dave">0</p></td>
      </ul>
        </table>

Answer 1

Вы можете это исправить, поиграв с атрибутом flex-direction.

td {
  display: flex;
  flex-direction: column;
}

Просто имейте в виду, что при этом justify-content и align-items изменят ось, на которую они влияют.Нет проблем в этом случае, если вы используете center для обоих.

p {
  color: black;
  padding: 5px 0 5px 5px;
}

h3 {
  padding: 0 0 10px 10px;
}

.bart {
  height: 200px;
  width: auto;
  float: right;
  padding: 30px 30px 0 0;
}

button {
  list-style: none;
}

td {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<img class="bart" src="bart.gif">
<div class="artist-list">
  <ul class="artist">
    <table>

      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="coleclick()"><li>J.Cole</li></button>
        <p>Votes: <a id="cole">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="slipknotclick()"><li>Slipknot</li></button>
        <p>Votes: <a id="slipknot">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="amineclick()"><li>Amine</li></button>
        <p>Votes: <a id="amine">0</a></p>
      </td>
      <td><button type="button" class="btn btn-dark" style="background-color: #ffc854; border: none;" onClick="daveClick()"><li>Dave</li></button>
        <p>Votes: <a id="dave">0</p></td>
      </ul>
        </table>