跨度类型的中心占位符

Question

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

我试过注释掉属性 width:0，这确实使标题居中，但现在焦点出现问题。

这是作为占位符的 span 的反应组件

<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"。在居中的 parent 和 child 中，width:0 块（或 inline-block）child 元素，将其置于 parent 的中心（实际上它将元素的左侧放在 parent 的中心），如果它包含文本或任何类型的内容，内容将向右增长（内容溢出 zero-width 元素）。

为了克服焦点问题，有一些解决方法：

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

另一个想法： 删除 width:0 但是：一旦用户点击 cpation 就隐藏默认标题，如果用户输入为 null 则再次将其设置回来.您可以将默认标题保存在 data-caption 标签中以轻松恢复它。

跨度类型的中心占位符

center placeholder of type span

css

text-alignment

reactjs