html - 折扣徽章，按钮和文字的简单HTML CSS代码

Question

我有一张图片。在图像下，我想要编号。已购买的商品，并在左侧查看商品。在右边，我想要一张带有折扣的小图像。
这是一个易于理解的布局：

__________
BOUGHT                     |disount |
BUTTON                     |on image|

按钮的形状完美。
我正在将所有内容居中对齐（可能是通过包装器）
这里是问题：


一切接coming而至
因为折扣是类似“ 55％”的文字，并且图片为58px，所以只有一部分图片通过

Answer 1

将文本元素的样式设置为display:block;和width:58px;。