css - Angular 带文本未正确居中(纯 CSS，无图像)

Question

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

请看我的 fiddle :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;
}