css - 角带文本未正确居中（纯 CSS，无图像）

Question

我使用纯 CSS（无图像）创建了一个功能区，但其中的文本没有居中。文本：NEW 现在仅部分可见。你只能阅读：NE

请看我的小提琴：http: //jsfiddle.net/mauricederegt/8kv6v/

如何解决此问题，使文本 NEW 位于功能区的中心？

亲切的问候，莫里斯

Answer 1

原因是它div.ribbon-green非常宽，并且其中心位于右侧。NEW 中的 E 是div.ribbon-green. 因此，为了使 NEW 居中显示的包装部分，我们必须移动div.ribbon-green. 我试着移动了一下，发现以下位置有效：

.ribbon-green {
  left: -10px;
  top: 5px;
}