相关疑难解决方法(0)

我需要居中对齐水平菜单.
我已经尝试了各种解决方案,包括混合inline-block/ block/ center-align等,但都没有成功.

这是我的代码:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

UPDATE

我知道如何居中对齐ul内div.这可以使用Sarfraz的建议来完成.但是列表项目仍然在内部浮动ul.

我需要Javascript来完成这个吗？

我有以下要求.

绿色父母宽度将根据设备宽度而变化.我需要所有的盒子都在父母的中心.

我已经尝试了以下的东西,但它没有帮助我.

试验1
Parent {text-align:center} box {display:inline-block}.

这导致了以下输出

试用2
Parent {text-align:center} box{float:left}.

这导致了以下输出

试验3
Parent {display:flex} box -> justify-around & justify-between也没有奏效.

.parent {
  text-align: center;
}
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

任何有关这方面的帮助将不胜感激.