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格邊框和文本不對齊

回答

相關問題