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

Question

我有一个如下所示的时事通讯订阅框:

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

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

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

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

如何解决这个对齐问题？

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