将li中的div对齐为中心

Question

这是小提琴： https://jsfiddle.net/5jnnutg8/

我的问题是如何调整＃34;＃＆＃34;将项目列为中心和内联。人们可以看到＆＃34;嗨＆＃34;标题在css中使用text-align: center在中心对齐，但这似乎不适用于列表项。

是否有一种纯粹的css方式可以做到这一点，而不会弄乱<div>，<ul>和<li>结构，因为我使用wordpress插件，它将是一个要改变这种痛苦。

我希望它是＃34;＃＆＃34;列表项目居中对齐，如果浏览器调整大小，那么＆＃34; 3＆＃34;下降但仍然居中 - 希望这是有道理的。

谢谢！

Answer 1

请勿使用float: left，只需使用display: inline-block;

即可

li {
    display: inline-block;
}

工作演示

＆＃13;

＆＃13;

.list-holder {
  background: black;
  height: 100px;
  color: white;
  text-align:center;
}
.div-list-item {
  background: red;
  color: black;
  margin-left: 10px;
}

.ul-class {
  list-style: none;
 padding: 0;
}

li {
    display: inline-block;
}

a {
    display: black;
}

＆＃13;

<div class="list-holder">
  Hi
  <ul class="ul-class">
    <li class="li-class">
      <div class="div-list-item">
        Something 1
      </div>
    </li>
    <li class="li-class">
      <div class="div-list-item">
        Something 2
      </div>
    </li>
    <li class="li-class">
      <div class="div-list-item">
        Something 3
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;