Javascript动态创建span并垂直对齐文本:文本留在底部

javascript dynamically create span and align text vertically : text stays at the bottom

本文关键字：文本 底部 对齐 垂直 动态 创建 span Javascript      更新时间：2023-09-26

我正在尝试生成一个svg矩形和一个span，以便span元素中的文本与svg元素垂直对齐。在声明式HTML+CSS中，我设法做到了这一点。但是我无法通过javascript实现。

下面是我的javascript代码: 
/* 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);

在这里我的codepen尝试:你可以注意到，html+css代码工作，但不是javascript的一个，我的意思是，它显示了一切，但不是我想要的

这是因为你的svg元素的垂直对齐不是middle本身;它是baseline(默认)。svg元素在这里是对齐自己的基线，这是文本的底部。

这可以通过简单地指定:

来解决:
svg.style.verticalAlign = "middle";

Codepen例子。

相关文章：