Search code examples
htmlcssalignment

How to align picture with list of html?

I am new to html coding and I could not find exact and clear solution for my problem.

I want to create a page with this format: I want to do the page with list of html.

enter image description here

Here is my html code:

enter image description here

Although I made alignment center my picture is on the left side of the page. What is wrong or missing with my code?

Solution

  • There is no float: center. Only float: left and float: right. You can left-float all of <p> inside the <li> and set the width of them to 33.33%.

    In this case the image has to be responsive:

    img {
  height: auto;
  max-width: 100%;
}

    Every <li> represent a row

    <ul>
  <li>
    <p>text</p>
    <p><img src=""></p>
    <p>text</p>
  </li>
</ul>

    In total

    img {
  width: 100%;
  height: auto;
}

ul {
  list-style-type: none;
}

ul>li>* {
  box-sizing: border-box;
  display: block;
  float: left;
  word-break: break-all;
  padding: 0 5px;
  width: 33.333%;
}

.text-center {
  text-align: center;
}

.full-width {
  width: 100%;
}
    <ul>
  <li>
    <p>
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </p>
    <p class="text-center">
      <img src="http://placehold.it/300x200" alt="">
    </p>
    <p>
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </p>
  </li>
  <li>

  </li>
  <li>
    <p class="full-width">
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </p>
  </li>
  <li>
    <p class="full-width">
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </p>
  </li>
  <li>
    <li>
      <p>
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      </p>
      <p class="text-center">
        <img src="http://placehold.it/300x200" alt="">
      </p>
      <p>
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
      </p>
    </li>
</ul>