如何用点将 li 与中心对齐答案

【问题标题】：How to align li to the center with the dot如何用点将 li 与中心对齐
【发布时间】：2020-12-22 12:29:21
【问题描述】：

我正在尝试将 li 标签和点居中对齐，这是我尝试过的代码，我已经使用了所有方法，但我找不到任何解决方案。

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div
      class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-4-tablet"
    >
      <img
        src="./assets/images/group.png"
        style="display: block; margin: auto"
        class="images"
      />
    </div>
    <div
      class="mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-4-tablet"
    >
      <div>
        <h2 style="text-align: center">staff</h2>
        <ul style="list-style-position: inside; justify-items: center">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

你想用材料设计还是纯 CSS 来做这件事？看起来您正在使用一些与材料设计相关的依赖项。您能否将其也包含在您的代码示例中？
@konekoya 不，我没有使用任何材料设计组件，我仅将材料用于布局网格，我想使用普通 css 来实现
然后您可以在示例代码中提供这些部门信息。如果你能提供一个可重现的例子就更好了，比如 codepen 或 codesanbox

标签： html css material-design

【解决方案1】：

你可以用 div 包裹 ul 并尝试下面的代码。

<style>
.box{
  display: flex;
}

.box ul{
  margin: auto;
  text-align: center;
}
</style>

<div>
  <h2 style="text-align: center">staff</h2>
  <div class="box"> 
     <ul style="list-style-position: inside; justify-items: center">
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
     </ul>
   </div>
</div>

【讨论】：

【解决方案2】：

使用align:center 将您的li 放在中间。

【讨论】：

【解决方案3】：

试试这个，

<ul style="list-style-position: inside;text-align: center;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

【讨论】：

【解决方案4】：

尝试将text-align: center 放在父ul 元素上，这应该为您将子li 元素居中。

【讨论】：