如何相对于其父输入按钮正确居中边框宽度形状？

Question

我有一个新闻订阅框，如下所示：

表单占用父项的整个宽度，因此按钮会填满所有可用的宽度。

使用before CSS子句，我在“订阅”按钮的顶部绘制一个小的“箭头”形状。

问题是箭头相对于按钮没有正确居中。这可以通过减少视口宽度来证明。例如，这里可以看到问题：

相对于按钮，箭头没有正确地水平居中。

如何解决这种对齐问题？

JSFiddle： http://jsfiddle.net/ahmadka/7965p/

CodePen（JSFiddle有时会失败）： http://codepen.io/anon/pen/qFvbc

Answer 1

为了定位绝对定位的东西，并且你知道确切的宽度，我总是这样做：

left: 50%;
margin-left: -[halve the width of the element]px;

因此，您应该通过向magin-left: -12px;选择器添加.form-wrapper button:before来解决问题。