Question

我有以下内容：http://jsfiddle.net/mb76koj3/。

[contentEditable=true]:empty::before{
  content:attr(data-ph);
  color: #CCC;
  text-align: center;
}

h1 {
  text-align: center;
}

<h1 contenteditable="true" data-ph="Name"></h1>

问题是<h1>居中，但占位符插入符号不居中（直到您开始输入）。插入符号在左侧，我该如何更改？

Answer 1

不是理想的解决方案，但我们可以通过将padding-left 50% :empty应用于translateX元素以使光标显示在中间来伪造效果。

然后使用绝对定位和* { margin: 0; padding: 0; } @-moz-document url-prefix() { /* CSS Hack to fix the position of cursor on FF */ [contentEditable=true]:empty { padding-top: 1em; padding-bottom: .25em; -moz-box-sizing: content-box; } } [contentEditable=true]:empty { padding-left: 50%; text-align: left; /* Fix the issue on IE */ } [contentEditable=true]:empty::before{ content:attr(data-ph); color: #CCC; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } h1 { text-align: center; position: relative; }转换函数的负值对齐占位符（伪元素）。

＆＃13;

<h1 contenteditable="true" data-ph="Name"></h1>

＆＃13;

<br>

＆＃13;

剩下的唯一问题 - 在OP提供的代码中可以看出 - 在Firefox上，contentEditable个元素被附加到:empty元素，导致{{1}伪类不再匹配元素了。因此，占位符无法恢复。

然而，由于问题是关于光标的位置，我认为这种行为对OP来说很好。

Answer 2

看了Hashem Qolami's answer后，我想出了这个：

[contentEditable=true]:empty {
    padding-left: 50%;
}

[contentEditable=true]:empty::before{
    content:attr(data-ph);
    color: #CCC;
    text-align: center;
    margin-left: -100%;
}

h1 {
    text-align: center;
}

<h1 contenteditable="true" data-ph="Name"></h1>

然而，adamdc78发现了2个问题：

在IE11中，光标出现在占位符之后。
在Firefox中，键入和清空后不会恢复占位符。

目前，我无法弄清楚如何解决这个问题。

将占位符插入符号置于contentEditable元素中

2 个答案: