выровнять текст по основанию поля содержимого в кнопках и вводе

Question

У меня есть эта кнопка

<input type="button" class="<?php echo $button_class ?> prev" name="checkout_prev_step" value="<?php echo $labels['prev'] ?>" data-action="prev"></input>

css:

#form_actions .button.yith-wcms-button.prev {
    background-image: url('assets/arrow-left.png');
    background-size: 5px;
    background-position: center left;
    background-repeat: no-repeat;
    display: inline-block;
    line-height: 1;
    vertical-align: text-bottom;
    font-family: 'Helvetica Neue LT Std Bold Condensed', Helvetica, sans-serif;
    letter-spacing: 1px;
    height: 45px;
}

Как вы можете видеть на прикрепленном изображении, текст внутри ввода «ПРЕДЫДУЩИЙ» не выровнен по внизу поля синий (поле содержимого).

Как это исправить?

введите описание изображения здесь

Answer 1

Здесь есть несколько вариантов,

1. Используйте line-height, чтобы немного переместить текст вниз.
2. Используйте тег button, чтобы сделать его гибким.

Пример ниже.

I have also added a custom font to make input looks like your example

.my-button
{
    background-image: url('assets/arrow-left.png');
    background-size: 5px;
    background-position: center left;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: text-bottom;
    font-family: 'Helvetica Neue LT Std Bold Condensed', Helvetica, sans-serif;
    letter-spacing: 1px;
    height: 45px;
}

.my-button-1 {
  line-height:70px
}
.my-button-2 {
   display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
}
.my-button-3 {
   display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
}

.my-button-9
{
    background-image: url('assets/arrow-left.png');
    background-size: 5px;
    background-position: center left;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: text-bottom;
    font-family: 'Bebas Neue', cursive;
    line-height:32px;
    letter-spacing: 1px;
    height: 45px;
    padding:10px;
}

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

<input type="button" class="my-button" name="checkout_prev_step" value="Some text" data-action="prev"></input>


<input type="button" class="my-button my-button-1" name="checkout_prev_step" value="Some text" data-action="prev"></input>

<button class="my-button my-button-2">
   <span>Some new text</span>
</button>
<button class="my-button my-button-3">
   <span>Some new text</span>
</button>

<input type="button" class="my-button-9" name="checkout_prev_step" value="PREVIOUS" data-action="prev"></input>

Answer 2

попробуйте добавить эти css строки к кнопке:

display:flex;
align-items:center;
justify-content:center;

посмотрите, работает ли