How to get a centered text in a box as small as possible

Question

My problem is that when I use text-align: center; , my text is centered but the "p" element doesn't resize to fit the text.

In the example below, we can see that the "p" element is much larger thant the text itself, I would like it to fit perfectly the text, because I want the text to be against the green borders (but still centered in its "p").

How could I do that ?

#container {
  width: 270px;
  display: flex;
  justify-content: space-between;
  border: 2px green solid;
}

div {
  border: 2px black solid;
}

p {
  text-align: center;
  display: block;
  
  font-family: "Times New Roman";
  font-size: 16px;
  background-color: yellow;
}

<div id="container">
  <div>
    <p>Small text</p>
  </div>
  <div>
    <p>This is another small paragraph</p>
  </div>
</div>

`I want the text to be against the red borders.` Is it just me or isn't there anything red? Do you mean the black borders? — Sacha, Mar 23 '18 at 14:23
well you cannot ... i will find the questions that will explain why — Temani Afif, Mar 23 '18 at 14:28
Sorry, I changed the color. I want the text to be against the green borders. — Charles.C, Mar 23 '18 at 14:28
https://stackoverflow.com/questions/34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width — Temani Afif, Mar 23 '18 at 14:33
https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap — Temani Afif, Mar 23 '18 at 14:33

score 1 · Accepted Answer · answered Mar 23 '18 at 14:36

1

After tinkering a bit, I found the following solution :

Set the inner divs to flex-shrink : 1 so they can shrink
Set the p to display : table-caption (I didn't even know this existed)

#container {
  width: 270px;
  display: flex;
  justify-content: space-between;
  border: 2px green solid;
}

div {
  border: 2px black solid;
  flex-shrink: 1;
}

p {
  text-align: center;
  display: table-caption;
  
  font-family: "Times New Roman";
  font-size: 16px;
  background-color: yellow;
}

<div id="container">
  <div>
    <p>Small text</p>
  </div>
  <div>
    <p>This is another small paragraph</p>
  </div>
</div>

answered Mar 23 '18 at 14:36

Jeremy Thille

26,047
12
43
63

not sure table-caption is a good idea here even if it will work – Temani Afif Mar 23 '18 at 14:38
That's the only way I found. Everybody else says it's impossible or provide non working examples, so I guess it's better than nothing :) – Jeremy Thille Mar 23 '18 at 14:39
the issue is that table-caption has a meaning and should be considered with table ... also impossible means that you need to understand why CSS is like that and reconsider the stuff ... for me this a logic behavior and not an issue and if he understand why it's like that we can easily do something else – Temani Afif Mar 23 '18 at 14:42
@Temani Are you sure there is a problem of semantics ? He didn't use incorrectly a "table-caption" tag, he use a "p" tag and order it to **behave like** a "table-caption", so browsers still know that it is a paragraph. (BTW, thank you Jeremy Thille) – Charles.C Mar 23 '18 at 15:04
@Charles.C i will simply resume that this is more a hack than normal way :) since it's working and the properties are known there is no issue but i guess we shouldn't always use them like that, but we can of course ;) – Temani Afif Mar 23 '18 at 15:11

score 0 · Answer 2 · answered Mar 23 '18 at 14:35

It isn't possible since the p element, even if you set it to display: inline-block will take 100% of the parent width as soon as its text wraps (that is, if there is no width setting for it). But trying around, i came up with a version that might work as a woraround for you. The essential thing about it is that there are inner and outer wrappers, a combination of inline and inline-block display and a padding in the outer wrapper. Maybe it helps you...

#container {
  width: 270px;
  display: flex;
  justify-content: space-between;
  border: 2px green solid;
}

.outer_wrapper {
  border: 2px black solid;
  text-align: center;
  padding: 30px;
}

.inner_wrapper {
  display: inline-block;
  background-color: yellow;
}

p {
  display: inline;
  font-family: "Times New Roman";
  font-size: 16px;
}

<div id="container">
  <div class="outer_wrapper">
    <div class="inner_wrapper">
      <p>Small text</p>
    </div>
  </div>
  <div class="outer_wrapper">
    <div class="inner_wrapper">
      <p>This is another small paragraph</p>
    </div>
  </div>
</div>

I also thought so, but yes it is possible. See my answer :) – Jeremy Thille Mar 23 '18 at 14:36 — Jeremy Thille, Mar 23 '18 at 14:36

score 0 · Answer 3 · answered Mar 23 '18 at 14:37

0

in your style sheet, #container has a width:270px --- any reason you have a fixed width

i would suggest, remove it, if it is not needed or change it to 100% and display:block;

also you may want to style div element as -- div{width:50%;border: 2px black solid;}

answered Mar 23 '18 at 14:37

JaYdipD

40
10

Try and make a runnable code snippet to illustrate your point. – Jeremy Thille Mar 23 '18 at 14:38

score -1 · Answer 4 · answered Mar 23 '18 at 14:38

Is this what you want? I removed flexbox and went with inline-block display. Also remember that p tags automatically have a margin attached to them.

#container {
  border: 2px green solid;
}

div {
  border: 2px black solid;
  display: inline-block;
}

p {
  text-align: center;
  font-family: "Times New Roman";
  font-size: 16px;
  background-color: yellow;
  margin:0;
}

<div id="container">
  <div>
    <p>Small text</p>
  </div>
  <div>
    <p>This is another small paragraph</p>
  </div>
</div>

How to get a centered text in a box as small as possible

4 Answers4