How to center div to the display while having a dynamic width?

Question

I have a div whose width I'd like to be dynamic based off of text that is inside the div. I've found that this is possible by setting the div's display to inline-block; however, now I can't get the div to center with the display. I don't want to use text-align: center on the div or the html body as I do not want the text inside the div to be centered. I'm open to having this problem fixed with or without inline-block. As long as the div is centered and the div width is dynamic based off of the text, then I'm happy.

<div id="wrapper">
    <p>Text that will change div width.</p>
</div>

#wrapper {
    display: inline-block;
}

from the duplicate: https://stackoverflow.com/a/10568245/8620333 — Temani Afif, Dec 11 '20 at 02:04

score 0 · Answer 1 · answered Dec 11 '20 at 02:02

Here's three different ways you can achieve this:

Play around with this code here

div.container {
  width: fit-content;
  margin: 0 auto;
}

p.content {
  background-color: rgb(100, 0, 0);
  color: white;
  display: block !important;
  padding: 10px;
}

p.content#fixed-width {
  background-color: rgb(0, 100, 0);
  width: 300px;
}

p.content#max-width {
  background-color: rgb(0, 0, 100);
  max-width: 55%;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="wrapper">
      <div class="container">
        <p class="content">
          Some text of whatever length you want, this paragraph does not have a defined width
        </p>
      </div>
    </div>
    <div class="wrapper">
      <div class="container">
        <p class="content" id="max-width">
          Some text of whatever length you want, this paragraph has a defined max width
        </p>
      </div>
    </div>
    <div class="wrapper">
      <div class="container">
        <p class="content" id="fixed-width">
          Some text of whatever length you want, this paragraph has a fixed width
        </p>
      </div>
    </div>
  </body>
</html>

Maciej Kwas · Answer 2 · 2020-12-11T02:19:23.167

#wrapper {
  display: flex;
  justify-content: center;
}

#wrapper > p {
  flex: 0 0 auto;
  padding: 10px;
  background-color: #e8e8e8;
}

<div id="wrapper">
    <p>Text that will change div width.</p>
</div>

Lot's of ways to accomplish this, set parent to flexbox container with display:flex and justify-content:center

// EDIT

When you set div to inline-block, you are telling the browser to render it as an inline element (mostly, basically), so you could eventually set text-align:center on the parent element and reset it again to text-align:left on #wrapper, this way wrapper will be centered, but paragraph left-aligned, yet it's not a good practice to change elements native's displays properties, so I would stick with flex approach.

Please see updated answer @gskn13 – Maciej Kwas Dec 11 '20 at 02:13 — Maciej Kwas, Dec 11 '20 at 02:13

score -2 · Answer 3 · answered Dec 11 '20 at 01:52

You could use the css built in variable em and update every time the p element is edited like

// When changing the p element with document.querySelector("#wrapper > p") do
document.getElementById("wrapper").style.width = document.querySelector("#wrapper > p").innerHTML.length + "em";

The problem is you would have to insert that line of code every time you edit the p element.

How to center div to the display while having a dynamic width?

3 Answers3