javascript动态创建跨度并垂直对齐文本:文本保持在底部
我试图生成一个svg矩形和一个span,以便span元素中的文本与svg元素垂直对齐。在声明式HTML+CSS中,我成功地做到了这一点。 但我无法通过javascript实现这一点 下面是我的javascript代码:javascript动态创建跨度并垂直对齐文本:文本保持在底部,javascript,svg,Javascript,Svg,我试图生成一个svg矩形和一个span,以便span元素中的文本与svg元素垂直对齐。在声明式HTML+CSS中,我成功地做到了这一点。 但我无法通过javascript实现这一点 下面是我的javascript代码: /* Svg creation ==============================*/ var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("
/* Svg creation
==============================*/
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", 60);
svg.setAttribute("height", 60);
var square = document.createElementNS("http://www.w3.org/2000/svg", "rect");
square.setAttribute("x", 0);
square.setAttribute("y", 0);
square.setAttribute("width", 60);
square.setAttribute("height", 60);
square.setAttribute("fill", "red");
svg.appendChild(square);
document.body.appendChild(svg);
/* Span creation
==============================*/
var outerSpan = document.createElement("span");
outerSpan.style.height = "60px";
outerSpan.style.lineHeight = "60px";
var innerSpan = document.createElement("span");
innerSpan.style.display = "inline-block";
innerSpan.style.verticalAlign = "middle";
innerSpan.style.lineHeight = "1em";
innerSpan.textContent = "Red square";
outerSpan.appendChild(innerSpan);
document.body.appendChild(outerSpan);
这里:您可以注意到html+css代码可以工作,但javascript代码不行,我的意思是,它显示了所有内容,但不是我想要的。这是因为
svg
元素的垂直对齐不是中间的;它是基线
(默认值)。这里的svg
元素将自身与基线对齐,基线是文本的底部
只需指定以下内容即可解决此问题:
svg.style.verticalAlign = "middle";