HTML格边框和文本不对齐

我想画一个带有边框和一个“+”字符一个div，但对准关：HTML格边框和文本不对齐

enter image description here

我使用的代码产生这就是：

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没有成功。可能会有我忽略的默认值？

如何获得边框和文字对齐？

来源

2014-10-20 Android Addict

用'线试试“高度”等于你的“身高” – DaniP 2014-10-20 13:10:32

我有 - 抱歉不提。对齐仍然偏移。 – 2014-10-20 13:11:25

http://jsfiddle.net/hx3ysx51/1/ – DaniP 2014-10-20 13:13:13

我已经做了以下工作; 线高应工作： 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; 
}

来源

2014-10-20 13:24:32 user2815681

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

来源

2014-10-20 13:15:32

您可以使用Unicode字符做出SQUARED PLUS：

的Javascript：

var divPlus = document.createElement("div"); 
document.body.appendChild(divPlus); 
divPlus.innerHTML = '&#8862;';

输出：

⊞

来源

2014-10-20 13:24:43

HTML格边框和文本不对齐

回答

相关问题