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 and margins但这样做会使浏览器之间的对齐方式不正确。 我也尝试使用lineHeight失败。 我可能会忽略默认值吗？

如何使边框和文本对齐？

Answer 1

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

Javascript：

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

输出：

⊞ 

Answer 2

设置height的div和line-height的的div为相同的值

Answer 3

我做了以下工作； lineheight应该起作用： http : //jsfiddle.net/czy2ue6c/

<div id="plus">+</div>

#plus{
width:100px;
height:100px;
background:red;
line-height:100px;
text-align:center;
color:white;
font-size:120px;
font-weight:bold;
}