Html 带有2种颜色和一个图像的按钮

因此，我试图创建一个按钮，带有一个小的徽标图像，背景颜色较深，文本背景颜色较浅。我设法做到了这一点，但当我使用不同长度的不同文本时，出现了一个问题

我的问题是，由于填充，文本没有在中心对齐。但是如果没有填充，文本会滑到图像后面。有人能帮我吗

.这是按钮吗{ 背景色：1ea3ce； 边界半径：4px； 颜色：ffffff； 显示：内联flex； 字体大小：粗体； 身高：100%； 边缘底部：-20px； 宽度：85%； 字体大小：小； 线高：20px； 最小高度：80px； 填充：1%2%1%20%； 位置：相对位置； 文字装饰：无； 文本转换：大写； 文本对齐：居中； 对齐项目：居中； } .is按钮：悬停{ 滤光片：亮度85%； 颜色：ffffff！重要； -webkit动画：无； -webkit转换：scale1.01； 动画：无； 变换：scale1.01； } .是按钮.标志按钮{ 背景色：1b88b3； 边界半径：4px 0px 0px 4px； 显示：内联； 身高：继承； 填料：4%5px； 位置：绝对位置； 左：0； 排名：0； }

使用flex box css属性并使html语法更加正确，创建您想要的响应性非常简单：

.这是按钮吗{ 背景色：1ea3ce； 边界半径：4px； 颜色：ffffff； 显示器：flex； 字体大小：粗体； 身高：100%； 宽度：85%； 字体大小：小； 最小高度：80px； 位置：相对位置； 文字装饰：无； 文本转换：大写； 文本对齐：居中； 对齐项目：居中； } .is按钮：悬停{ 滤光片：亮度85%； 颜色：ffffff！重要； } .是按钮.标志按钮{ 背景色：1b88b3； 边界半径：4px 0px 0px 4px； 填料：4%5px； 左：0； 排名：0； } .按钮跨度是多少{ 宽度：100%； 填充：0.10%； }

使用flex box css属性并使html语法更加正确，创建您想要的响应性非常简单：

.这是按钮吗{ 背景色：1ea3ce； 边界半径：4px； 颜色：ffffff； 显示器：flex； 字体大小：粗体； 身高：100%； 宽度：85%； 字体大小：小； 最小高度：80px； 位置：相对位置； 文字装饰：无； 文本转换：大写； 文本对齐：居中； 对齐项目：居中； } .is按钮：悬停{ 滤光片：亮度85%； 颜色：ffffff！重要； } .是按钮.标志按钮{ 背景色：1b88b3； 边界半径：4px 0px 0px 4px； 填料：4%5px； 左：0； 排名：0； } .按钮跨度是多少{ 宽度：100%； 填充：0.10%； }

使用css伪类：在

按钮：在{ 背景图片：url'https://www.securityacademy.nl/wp-content/uploads/2019/12/seco-logo-klein.png'; 背景尺寸：80px； 背景重复：无重复； 内容：； 宽度：80px； 高度：80px； 背景色：1ea3ce； 边界半径：4px 0px 0px 4px； 位置：绝对位置； 顶部：10px； 左：10px； } .这是按钮吗{ 背景色：1ea3ce； 边界半径：4px； 颜色：ffffff； 字体大小：粗体； 显示：内联块； 宽度：85%； 字体大小：小； 线高：20px； 位置：相对位置； 文字装饰：无； 文本转换：大写； 文本对齐：居中； 对齐项目：居中； 填充顶部：35px； 垫底：35px； 左侧填充：90px； } .is按钮：悬停{ 滤光片：亮度85%； 颜色：ffffff！重要； -webkit动画：无； -webkit转换：scale1.01； 动画：无； 变换：scale1.01； }

使用css伪类：在

按钮：在{ 背景图片：url'https://www.securityacademy.nl/wp-content/uploads/2019/12/seco-logo-klein.png'; 背景尺寸：80px； 背景重复：无重复； 内容：； 宽度：80px； 高度：80px； 背景色：1ea3ce； 边界半径：4px 0px 0px 4px； 位置：绝对位置； 顶部：10px； 左：10px； } .这是按钮吗{ 背景色：1ea3ce； 边界半径：4px； 颜色：ffffff； 字体大小：粗体； 显示：内联块； 宽度：85%； 字体大小：小； 线高：20px； 位置：相对位置； 文字装饰：无； 文本转换：大写； 文本对齐：居中； 对齐项目：居中； 填充顶部：35px； 垫底：35px； 左侧填充：90px； } .is按钮：悬停{ 滤光片：亮度85%； 颜色：ffffff！重要； -webkit动画：无； -webkit转换：scale1.01； 动画：无； 变换：scale1.01； }

---

请提供您将要实现的目标的示意图。请提供您将要实现的目标的示意图。没问题；当我用DIF使用解决方案时，记得要把一个你认为是有用的问题的回答付诸表决。

---

fernt徽标的图像没有对准按钮的左侧。你有解决办法吗？请参见屏幕截图：@gvankuijk您确定您已经很好地实现了所有css吗？我已经尝试再次使用另一个标志，它似乎工作。你确定你的element.is button span的css属性宽度为100%吗？你是对的，宽度为85%。还有一个问题，当按钮中只有一行文本时，文本不会在中心对齐。看到截图：@gvankuijk我更新了帖子。请参阅新css中的.is按钮跨度和.is按钮.logo按钮。我只是添加了一个宽度：100%的跨度元素没有问题；记得要把你认为是有用的感谢的一个问题加上一个问题，当我使用你的解决方案时，不同的徽标的图像不在按钮左边。你有解决办法吗？请参见屏幕截图：@gvankuijk您确定您已经很好地实现了所有css吗？我已经尝试再次使用另一个标志，它似乎工作。你确定你的element.is button span的css属性宽度为100%吗？你是对的，宽度为85%。还有一个问题，当按钮中只有一行文本时，文本不会在中心对齐。看到截图：@gvankuijk我更新了帖子。请参阅新css中的.is按钮跨度和.is按钮.logo按钮。我只是在span元素中添加了一个宽度：100%