当按钮是图片时，文本也具有规定的大小和间距。如何通过CSS让文字出现在图片的中间？

Question

我有一个问题，觉得麻烦的CSS设置需要每个人的帮助-

要求如下:一张图片上有一个按钮，图片上有一个文字设计草稿，上面标注的按钮是图片的尺寸必须是200px，文字的宽度必须是26px，图片中间的文字必须是26px，图片和图片之间的上下间距是8px。需要实现下图所示的示例。

但我无论如何都做不到。我希望你能提供一些解决方案，让我知道如何处理这种需求。谢谢大家

.btn{
    display: inline-block;
    width: 200px;
    height: 100px;
    background-image: url('https://upload.cc/i1/2021/09/12/IX7D1d.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 140%;
}

.txt{
    font-size: 26px;
    text-align: center;
    padding: 16px;
}

<a class="btn" href="javascript:;">
    <p class="txt">send</p>
</a>

​

Answer 1

您的背景会误导您相信它与按钮的位置和大小相匹配(如果您在.btn样式中添加一个边框，您就会明白我的意思)

因此，如果你的背景是黄色的，需要一个黑色的边框来更好地设置它的样式，这比加载一个按钮图像并缩放它要快。

​

.btn{
    position: relative ;
    display: inline-block;
    width: 200px;
    height: 42px; /* 8 + 26 +8*/
    border: 5px solid black ;
    background-color: yellow ;
    border-radius: 25px ;
    
    /* to center the text vertically using flex*/
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.txt{
    font-size: 26px;
    text-align: center;
}

<a class="btn" href="javascript:;">
    <p class="txt">send</p>
</a>

​

Answer 2

首先，确保默认情况下没有通过添加margin: 0px;来定义边距

2.最后，使用line-height: 1.5;为其添加一个行高属性

还有其他几种方法，但这应该是最快的

​

.btn{
    display: inline-block;
    width: 200px;
    height: 100px;
    background-image: url('https://upload.cc/i1/2021/09/12/IX7D1d.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 140%;
}

.txt {
    font-size: 26px;
    text-align: center;
    padding: 16px;
    margin: 0px;
    line-height: 1.5;
}

<a class="btn" href="javascript:;">
    <p class="txt">send</p>
</a>

​