将输入按钮的背景图像居中对齐

gopalraju 发表于 Dev

Gopalraju

这听起来像是一个简单的修复程序，但让我详细解释一下。

我有一个<input type="submit"/>按钮，我正在尝试将箭头对齐按钮文本的右边（该文本已经居中）。

这是小提琴：http : //jsfiddle.net/s6rrzsa4/4/ 提交按钮

现在要解决的问题：

我无法将更<input>改为<button>代码，因为它来自CMS）。
按钮文本可以是任何东西，这意味着我不能以偏移量（等于文本的宽度）裁剪箭头图像，而不能使用background-position：center。
我不能为父div添加：after伪元素，因为它会使箭头区域不可点击。
正如我已经说过的，按钮文本可以更改。所以我不能使用百分比作为背景。
按钮的宽度固定（抱歉，忘记添加此点）。

Praveen Vijayan

@felix解决方案很好。但是它具有将span元素附加到正文的缺点，以便计算文本的宽度。我们可以使用canvas来计算文本的宽度，但不会将其附加到DOM。

http://jsfiddle.net/s6rrzsa4/16/

var elem = $('input'),
    cs = window.getComputedStyle(elem[0]),
    context =  document.createElement("canvas").getContext("2d"),
    metrics, pos;

    context.font = cs.fontSize + " " + cs.fontFamily;

    metrics = context.measureText(elem[0].value.toUpperCase()), 
    pos =  (elem.width() - metrics.width)/2 + 20;

    elem.css('background-position','calc(100% - '+pos+'px) center');

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。