當按鈕是背景圖，文字又必須在按鈕的正中間該如何透過 CSS 按照設計稿的要求呈現呢？ css3 html5

大家好，我有個 CSS 設定問題感覺到困擾需要大家的幫忙～

需求如下：
有一個按鈕的圖片，圖片中有個文字
設計稿上面標註按鈕的圖片必須寬度是 200px 文字的大小必須是 26px
文字在圖片的正中間，與圖片的上下間距是 8px ，需要達成如下圖範例～

img


但我始終怎麼做都做不出來～希望大家可以提供一些解法讓我知道遇到這種需求該如何處理比較好，謝謝大家！
我的問題程式碼 https://codepen.io/hong-wei/pen/GREEJRo

我测试了一下样式，发现如果让文字高度居中因为下划线的存在会显得比较靠下，非要居中可以把line-height注释回来，其实样式就这么多，不难，都是只要多用就会，我给你打了注释，方便你学习


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    #box{
      /* 宽 */
      width: 200px;
      /* 高 */
      height: 42px;
      /* 字体尺寸 */
      font-size: 26px;
      /* line-height可以设置单行居中,其实就是设置一行文字行间距
      当值等于容器的height时一行文字就垂直居中了 */
      /* line-height: 42px; */
      /* 文字水平居中 */
      text-align: center;
      /* 背景色 */
      background-color: #FFF100;
      /* 设置外边的样式 就是你这里的黑线 5px是宽度 solid是实线 black是黑色 */
      border: 5px solid black;
      /* 设置外边的圆角 当大小21px是某个边长的一半时,这里是高的一半,对应的那个边的圆角会形成半圆 */
      border-radius: 21px;
    }

    a{
      color: #1413DB;
    }
  </style>
  <body>
    <div id="box">
        <a href="">send</a>
    </div>
  </body>
  <script>
  </script>
</html>

img

感兴趣才能学下去吧，我是对前端感兴趣，随着自己的积累，掌握的也越来越多，会有一种自豪感，遇到问题时也可以比别人更快解决，没有兴趣支撑工作注定枯燥无味，不过这也是生活，有多少人不是做着自己不爱做的事，我们改变不了世界，只能改变自己的心态与做事的方式，不要逼迫自己，加油吧