Editable with centered text

Question

I want to have a content-editable <span> whose width grow as we type and whose text is centered. I would like a solution that does not imply Javascript if possible.

As you can see, the text-align property doesn't do anything:

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

<span id="item" contenteditable="true">Hello</span>

How should I do?

you are wrong, text-align is working fine and your text is centred — Temani Afif, Aug 19 '18 at 14:21
@TemaniAfif What browser are you on? On Firefox I get something like that https://imgur.com/a/WUldZwf — JacopoStanchi, Aug 19 '18 at 14:23
@TemaniAfif Please write an answer I will validate yours. I searched the solution non-stop during the 2 last days. — JacopoStanchi, Aug 19 '18 at 14:33
@dippas what is the relation of the duplicates with this question? it's not an issue with height or width — Temani Afif, Aug 19 '18 at 15:02
@dippas the width was applied to the body element to create the line break ... it's not an issue with width at all, I can simply put a longer text without adding max-width — Temani Afif, Aug 19 '18 at 15:05
@dippas yes I always question dupes when I don't agree ... there is probably other dupes, but those one aren't [for me]. The op don't want to apply width or height to his element, so the answers are oboviously the same but the problem is completely different. ... But at least I comment before trying to reopen duplicates — Temani Afif, Aug 19 '18 at 15:09

Temani Afif · Accepted Answer · 2018-08-19T15:06:47.517

1

You need to make the span inline-block:

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

<span id="item" contenteditable="true">Hello some text and more teeeexxt some text and more teeeexxt some text and more teeeexxt some text and more teeeexxt some text</span>

edited Aug 19 '18 at 15:06

answered Aug 19 '18 at 14:40

Temani Afif

245,468
26
309
415

score 0 · Answer 2 · answered Aug 19 '18 at 14:23

0

This is a possible solution:

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

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

<div id="container"><span id="item" contenteditable="true">Hello</span></div>

But of course, I wrapped it up in a div to tidy it up a bit

answered Aug 19 '18 at 14:23

Frikk Ormestad Larsen

395
1
3
17

no need all this, simply move text-align:center from the span to the div and it's done – Temani Afif Aug 19 '18 at 14:25
Yea, that is also possible >.< But at least it is easier to align multiple elements at once now xD – Frikk Ormestad Larsen Aug 19 '18 at 14:26

score 0 · Answer 3 · answered Aug 19 '18 at 14:26

0

try to add "display: block;" in css.

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

answered Aug 19 '18 at 14:26

xin chung

23
2
9

score 0 · Answer 4 · answered Aug 19 '18 at 14:30

You just need wrap your span with a div and give it text-align: center style to achieve what you wanted.

#item {
  border: solid;
}

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

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

Editable with centered text

4 Answers4