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

Question

我有一个时事通讯订阅框，如下所示：

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

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

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

相对于按钮，箭头未正确水平居中。

我该如何解决这个对齐问题？

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选择器来解决。