Google Icon Вертикальное выравнивание не работает

Question

Я пытаюсь выровнять знак «минус» и «плюс» снизу.Тем не менее, ни CSS, ни встроенный стиль не работает.При выборе содержимого в нижней части значка нет лишних пробелов.

Почему не работают ни css, ни оператор inline-style?

Ниже приведены коды, которые япробовал:

HTML

<tr>
  <td style="vertical-align: text-bottom;">
    Copies:
    <i class="material-icons icons">&#xE15D;</i>
    <input type="text" id="myNumber" size="1px" value="1" />
    <i class="material-icons">&#xE3BA;</i>
  </td>
</tr>

CSS-опция 1

material-icons.icons {
  vertical-align: text-bottom;
}

CSS-опция 2

material-icons.icons {
  position: absolute;
  bottom: 0;
  right: 0;
}

Answer 1

Создайте разные

для каждого из них, он будет правильно выровнен.Проверьте следующий код:

// Ссылка для добавления значка материала (CDN для значка материала), который вы добавили в

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<table>
<tr>
  <td style="vertical-align: text-bottom;">  
    Copies:</td>
   <td> <i class="material-icons icons">&#xE15D;</i>  </td>
  <td>  <input type="text" id="myNumber" size="1px" value="1" /> </td>
    <td><i class="material-icons">&#xE3BA;</i></td>
  </td>
</tr>
</table>

Answer 2

Вы можете использовать flexbox для ячейки таблицы.

td {
  display: flex;
  align-items: flex-end; /* Vertical alignment at the bottom */
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
  <tr>
    <td>
      Copies:
      <i class="material-icons icons">&#xE15D;</i>
      <input type="text" id="myNumber" size="1px" value="1" />
      <i class="material-icons">&#xE3BA;</i>
    </td>
  </tr>
</table>

Answer 3

Подход 1:

PS: ответ @Gerard хорошо принят, поскольку он следует за flexbox, который является хорошей техникой для игры с выравниванием элемента, также ответ не изменяетразметка как слегка измененная в подходе 2.

подход 2:

• Внесены небольшие изменения в разметку HTML,
  - Обернул Copies: внутри тега span.
• Плавающий каждый элемент и использовал line-height для настройки элементов.

td {
    height: 20px;
}

td > * {
    float: left;
    display: inline-block;
    height: 100%;
    line-height: 20px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
  <tr>
    <td valign="bottom">
      <span>Copies:</span>
      <i class="material-icons icons">&#xE15D;</i>
      <input type="text" id="myNumber" size="1px" value="1" />
      <i class="material-icons">&#xE3BA;</i>
    </td>
  </tr>
</table>

Answer 4

Добавьте ниже CSS и все готово ...

tr>td {
    display:table;
}
tr>td>i {
    display:table-cell;
    vertical-align: bottom;
}