html - 使用CSS在按钮中居中图像

Question

我想用这段代码制作一个带图片的按钮

.btnWo {
    position: relative;
    outline: none;
    border: none;
    height: 150px;
    width: 400px;
    border-radius: 10px;
    color: #FFF;
}

.btnWo img {
    height: 150px;
    width: 400px;
    border-radius: 10px;
    object-fit: cover;
}

.button-text {
    position: absolute;
    margin-right: 25px;
    bottom: 25%;
    width: 100%;
    right: 0%;
    text-align: right;
}

.button-text2 {
    bottom: 10%;
}

<div class="wo-img">
  <button id="btnWo" class="btnWo">
    <img src="https://i.postimg.cc/XNKnzLR0/woBg1.jpg">
    <span id="woName" class="button-text">Name</span>
    <span id="woTime" class="button-text button-text2">Time</span>
  </button>
</div>

但图像有点偏右，我希望它完全覆盖按钮我一直在尝试 padding solution和 transform solution但是没用

Answer 1

按钮(和其他元素)有一些默认填充，这就是您看到图像移动的原因。

添加

padding: 0;

到

.btnWo {
    ...
}

---

一些开发人员使用一种技术，在样式表的开头将所有元素的默认值“清零”。这使您免于此类问题。

* {
    padding: 0;
    margin: 0;
    border: 0;
}