类型span的中心占位符

Question

我创建了一个跨度，用作figcaption的占位符。我试图居中放置占位符，但它正在创建一些我无法控制的填充（不确定）。 这是代码沙箱的链接。  sanbox

我尝试注释掉属性width:0，该属性的确居中于标题的位置，但现在的焦点是行为不正常。

这是跨度的反应成分，用作占位符

<span
 contentEditable={false}
 style={{
    pointerEvents: "none",
    display: "inline-block",
    width: "0",
    maxWidth: "100%",
    whiteSpace: "nowrap",
    opacity: "0.333"
 }}
>
 Figure Caption
</span>

要重现该错误，请打开沙箱，将光标置于编辑器中，然后单击insert image按钮。单击它后，就会插入带有标题的图像。其中的占位符未居中。

Answer 1

只需从设置中删除width: "0"。在居中的父级和子级中，将width:0用作块（或内联块）子元素，将其放在父级的中心（实际上，将元素的左侧放在父级的中心），如果是，包含文本或任何类型的内容，内容将向右增长（内容溢出零宽度元素）。

要解决焦点问题，有一些解决方法：

第一个想法：使用margin-left。您仍然可以使用width:0，但必须将margin-left设置为等于字幕文本宽度的一半。一旦文本发生更改（onKeyup事件），此想法需要更多的编码来计算字幕的动态宽度。

另一种想法：：删除width:0，但是：用户单击cpation后立即隐藏默认标题，如果用户输入为null，则将其重新设置为默认标题。您可以将默认标题保留在data-caption标记中，以便轻松恢复。