中心动态内容作为div的宽度更改

Question

我正在开发一个项目，我使用一些JavaScript来根据某个类中的元素数量生成按钮（每个元素的1个按钮，类＃34; textContent＆＃34;）。所有这些按钮都附加到页面底部的另一个div。我试图弄清楚如何将所有按钮保持在中心位置，并且div只能根据需要加宽以容纳按钮数量（每个项目的按钮数量都会改变）。

有办法做到这一点吗？我在CodePen中包含了代码。我想做像

这样的事情

.stepCenter {
min-width: 10%;
text-align: center;
}

可能会这样做。我的想法是div会随着内容而增长，但事实并非如此。我错过了什么？

CodePen

<div id="text-container">
  <div id="projectTitleContainer">

  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
  <div class="textContent">
    <div class="sectionTitle">

    </div>
    <div class="sectionText">

    </div>
  </div>
</div>

<div class="stepCenter" id="stepCenter">
  <div class="stepNumber" id="stepNumber">
    <button class="button" id="introButton" onclick="myPosition(0)">Intro</button>
  </div>
</div>

<div id="buttonHolder">
  <button id="backButton" onclick="var pos = getPosition(); myPosition(pos-1);">Prev</button>
  <button id="nextButton" onclick="var pos = getPosition(); myPosition(pos+1);">Next</button>
</div>

脚本：

<script>
function getPosition() {
  var parent = document.getElementById("text-container");
  var children = document.getElementsByClassName("textContent");

  var pos = 0;

  for (var i = 0; i < children.length; i++) {
    if (children[i].style.display === 'block') {
      pos = i;
      break;
    }
  }
  return pos;
}

function myPosition(pos) {
  var parent = document.getElementById("text-container");
  var children = parent.getElementsByClassName("textContent");

  var element;

  for (var i = 0; i < children.length; i++) {
    children[i].style.display = "none";
    if (i === pos) {
      element = children[i];
    }
  }

  if (element) {
    element.style.display = "block";
  }

  if (pos > 0) {
    document.getElementById("backButton").style.visibility = "visible";
  } else {
    document.getElementById("backButton").style.visibility = "hidden";
  }

  if (pos >= children.length - 1) {
    document.getElementById("nextButton").style.visibility = "hidden";
  } else {
    document.getElementById("nextButton").style.visibility = "visible";
  }
}

myPosition(0);

function setNumbers() {
  var myVariable = $('.textContent').length;

  for (var x = 1; x < myVariable; x++) {
    var ele = document.createElement("div");
    ele.setAttribute("class", "stepNumber");
    ele.setAttribute("id", "stepNumber" + (x + 1));
    $(ele).append("<button class='button' onclick='myPosition(" + x + ")'>" + x + "</button");
    document.getElementById("stepCenter").appendChild(ele);
  }
}

setNumbers();
</script>