CSS HTML我的text-align和我的显示内联块不起作用

Question

代码

#step-1,
#step-2,
#step-3 {
  display: inline-block;
  text-align: 30px;
  height: 150px;
}

<section id="steps">
  <div class="wrapper">
    <ul>
      <li id="step-1">
        <img src="IMAGE/steps-icon-1.png">
        <h3 class="toUppercase">Plannifier</h3>
        <p>text text text </p>
      </li>
      <li id="step-2">
        <img src="IMAGE/steps-icon-2.png">
        <h3 class="toUppercase">Organiser</h3>
        <p>text text text</p>
      </li>
      <li id="step-3">
        <img src="IMAGE/steps-icon-3.png">
        <h3 class="toUppercase">Voyager</h3>
        <p>text text text</p>
      </li>
    </ul>
  </div>

正在做什么

[

我想要实现的目标

[

Answer 1

使用flex实现此目的

sizeof(char[__is_array_of_constant_known_size(var1)?1:-1])

.wrapper {
  width: 80%;
  margin: auto;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

#step-1,
#step-2,
#step-3 {
  margin-right: 15px;
  height: 150px;
  width: 30%;
}