时间戳

首页 > 解决方案 > 使用css在按钮中居中图像

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

问题描述

我想用这个代码制作一个带有图像的按钮

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

但图像有点偏右，我希望它完全覆盖我一直在尝试填充解决方案和转换解决方案的按钮，但它没有用

标签： htmlcss

解决方案

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

添加

padding: 0;

到

.btnWo {
    ...
}

一些开发人员使用一种技术，在样式表的开头将所有元素的默认值“归零”。这使您摆脱了这些问题。

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

推荐阅读