CODEWITHSUNDEEP
htmlcssstyles
Benjamin Cohana
Benjamin Cohana

Reputation: 13

CSS HTML my text-align and my display inline-block does not work

Code

#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>

What it is doing

[What it is doing]

What I am trying to accomplish

[What I am trying to accomplish]

Upvotes: 1

Views: 36

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Use flex to achieve this

.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%;
}
<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>
</section>

Upvotes: 1

Related Questions