html - div中的动态数据要居中

我试图弄清楚如何使数据居中对齐，但无法正确解释，因此将代码粘贴到此处。

<div class"mainDiv">
  <ul>
      <li><dl> <dt> dynamic name </dt> <dd> dynamic value  </dd> </dl></li>
      <li><dl>
                    <dt>dynamic name</dt>
                    <dd>dynamic value</dd>
                </dl></li>
      <li><dl>
                    <dt>dynamic name  </dt>
                    <dd>dynamic value</dd>
                </dl></li>
  </ul>
</div>

主div的宽度为100％，li的将包含动态数据，我希望ul居中，而不会传入任何数据。如果添加一项，则应居中，如果添加3项，则应居中。我试过了但是我的解决方案是给ul一个固定的宽度，但这并不能解决我的问题，因为数据是动态的并且保持宽度固定不是解决方案。

 <style>
  ul {
padding:0;
margin:0;
  }
  body {
color:#fff;
margin:0; padding:0;
  }
  .main {
  background: #000000;
  float: left;
  width: 100%;
  text-align: center;
  }
  .main ul {
  width: 100%;
  }
  .main ul li {
  width: 33.33%;
  float: left;
  }
  </style>

我添加了样式，当我添加这些数据类型时，我也遇到了麻烦。

最佳答案

希望这可以帮助：

<div class"mainDiv" style="margin:auto;text-align:center">
  <ul>
      <li>dynamic data</li>
      <li>dynamic data</li>
      <li>dynamic data</li>
  </ul>
</div>

关于html - div中的动态数据要居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20160188/