在單行上水平對齊表格單元格中的元素

Question

在我的表中，我有一列包含兩個按鈕和一個輸入元素。 它是有序的； 減號按鈕，輸入，加號按鈕。 然而，這些元素都是垂直對齊的。 我似乎無法為我的特定情況找到解決方案。 如何讓它水平對齊。

html：

<td class="text-center">
  <button class="page-btn" type="submit" value="foil-{{ card.card_id }}" onclick="minus_inventory(this.value)" tabindex="-1">
    <img class="icon" src="{% static 'base/img/icons/minus.png' %}" alt="Filter Sets">
  </button>
  <input type="number" id="foil-{{ card.card_id }}" class="page-input-inventory" maxlength="3" autocomplete="off" value="{{ card.foil }}" tabindex="2">
  <button class="page-btn" type="submit" value="foil-{{ card.card_id }}" onclick="plus_inventory(this.value)" tabindex="-1">
    <img class="icon" src="{% static 'base/img/icons/plus.png' %}" alt="Filter Sets">
  </button>
</td>

css：

.page-btn {
  width: 1.5rem;
  margin: 0 .4rem;
  padding: 0;
  outline: none !important;
}
.page-btn .icon {
  filter: invert(99%) sepia(10%) saturate(424%) hue-rotate(204deg) brightness(114%) contrast(93%);
  width: 1.5rem;
  height: 1.5rem;
  margin: .125rem 0 .125rem 0;
  outline: none !important;
}
.table {
  color: #f6f6f6;
  font-size: .8rem;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  color: #f6f6f6;
  background-color: #161d31;
}
.page-input-inventory {
  vertical-align: middle;
  text-align: center;
  font-size: .9rem;
  width: 3rem;
  height: 1.5rem;
  margin: .1rem auto;
  padding: 0 8px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  outline: 0 none !important;
}

截屏：

Answer 1

你試過這個嗎？

xyz {
   display: inline;
}