HTML div边框和文本不对齐

Question

我正在尝试绘制一个带边框的div和一个＆＃39; +＆＃39;对齐是关闭的：

我用来生成它的代码是：

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

将div的height和line-height的{​​{1}}设置为相同的值

Answer 3

我做了以下的话; 行高应该工作： 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;
}