在按钮和输入中将文本与内容框的底部对齐

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

正如您在所附图片中看到的那样，输入“PREVIOUS”内的文本未与蓝色框（内容框）的底部对齐。

如何解决这个问题？

Answer 1

尝试将这些 css 行添加到按钮：

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

看看有没有效果

Answer 2

这里的选项很少，

1. 使用line-height 将文本向下移动一点。
2. 使用button标签使其成为一个弹性盒子。

以下示例。

我还添加了自定义字体以使输入看起来像您的示例

.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>