如何将图片与html列表对齐？

Question

我是html编码的新手，我无法找到解决问题的准确而明确的解决方案。

我想用这种格式创建一个页面：我想用html列表进行页面。

这是我的HTML代码：

虽然我制作了对齐中心，但我的图片位于页面的左侧。我的代码有什么问题或缺失？

Answer 1

没有 float: center。仅限float: left和float: right。您可以在<p>内左 - 浮动所有<li>，并将其宽度设置为33.33%。

在这种情况下，图像必须具有响应性：

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

每个<li>代表一行

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

总计

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您最好考虑使用网格系统。我建议使用Twitter的Bootstrap - 绝对是最容易开始使用的

http://getbootstrap.com/