css - HTML div 边框和文本不对齐

Question

我正在尝试绘制一个带有边框和单个“+”字符的 div，但对齐方式已关闭:

我用来生成这个的代码是:

var divPlus = document.createElement("div");
divPlus.style.position = "absolute";
divPlus.style.left = '5px';
divPlus.style.width = '7px';
divPlus.style.height = '7px';
divPlus.style.top = "20px";
divPlus.style.color = "#111111";                    
divPlus.style.fontWeight="normal";
divPlus.style.border = "1px solid";
divPlus.innerHTML = '+';

我玩过 padding 和 margins，但这样做会导致跨浏览器对齐不一致。我也尝试过使用 lineHeight 但没有成功。可能有我忽略的默认设置吗？

如何让边框和文本对齐？

Answer 1

您可以使用 unicode 字符来制作 SQUARED PLUS :

Javascript:

var divPlus = document.createElement("div");
document.body.appendChild(divPlus);
divPlus.innerHTML = '⊞';

输出:

⊞