带有居中文本的可编辑 <span> [重复]答案

【问题标题】：Editable <span> with centered text [duplicate]带有居中文本的可编辑 <span> [重复]
【发布时间】：2018-08-19 14:18:05
【问题描述】：

我想要一个内容可编辑的<span>，它的宽度随着我们键入而增加，并且其文本居中。如果可能的话，我想要一个不使用 Javascript 的解决方案。

如您所见， text-align 属性没有做任何事情：

#item {
  border: solid;
  text-align: center;
}

&lt;span id="item" contenteditable="true"&gt;Hello&lt;/span&gt;

我该怎么办？

【问题讨论】：

给 span 一些最小宽度
你错了，text-align 工作正常，你的文本居中
@TemaniAfif 你用的是什么浏览器？在 Firefox 上，我得到类似的东西 imgur.com/a/WUldZwf
添加display:inline-block
@TemaniAfif 非常感谢 MUUUUUUUUUUCHHHHH

标签： html css

【解决方案1】：

您需要制作span inline-block：

#item {
  border: solid;
  text-align: center;
  display:inline-block;
}

&lt;span id="item" contenteditable="true"&gt;Hello some text and more teeeexxt some text and more teeeexxt some text and more teeeexxt some text and more teeeexxt some text&lt;/span&gt;

【讨论】：

【解决方案2】：

这是一个可能的解决方案：

#container {
margin-left: auto;
margin-right: auto;
height: 100px;
width: 100px;
position: relative;
}

#item {
  border: solid;
  text-align: center;
  
}

&lt;div id="container"&gt;&lt;span id="item" contenteditable="true"&gt;Hello&lt;/span&gt;&lt;/div&gt;

当然，我将它包裹在一个 div 中以稍微整理一下

【讨论】：

不需要这一切，只需将 text-align:center 从 span 移动到 div 即可完成
是的，这也是可能的>.

【解决方案3】：

尝试添加“显示：块；”在 CSS 中。

#item {
  display: block;
  border: solid;
  text-align: center;
}

【讨论】：

【解决方案4】：

你只需要用div 包裹你的跨度并给它text-align: center 样式来实现你想要的。

#item {
  border: solid;
}

.text-center {
  text-align: center;
}

<div class="text-center">
  <span id="item" contenteditable="true">Hello</span>
</div>

【讨论】：