在html和css中居中不同的图像和不同的文本列表* ul *和* li *

Question

我在这里遇到了一些困难！

目标是在每一行上制作一个包含不同图像的列表，与文本相同，但我还没有找到最好的方法......我正在努力解决它。

所以，我正在尝试这个...（参见代码）...但是我无法将文本与图像的垂直尺寸对齐，也不能使图像相应地响应窗口大小，上下缩放到始终以文本为中心。

/*reset*/

ul {
  list-style: none;
}
.list {
  width: 100%;
  height: auto;
  padding: 0;
  position: relative;
  overflow: visible;
}
.list p {
  color: red;
  font-size: 12px;
  text-decoration: none;
  vertical-align: middle;
  float: left;
  padding-top: 20px;
}
.list img {
  clear: left;
  float: left;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  padding-top: 20px;
}
.car {}

<div class="list">
  <ul>
    <li>
      <img src="https://luxuryimportautorepair.com/wp-content/uploads/2015/05/audi-21.jpg" width="71" height="64">
      <p>AUDI</p>
    </li>
    <li>
      <img src="http://www.modafeminina.co/img/fotos/mercedes%20benz%20classe%20a%206.jpg" width="71" height="64">
      <p>BENZ</p>
    </li>


    <li>
      <img src="http://jfs24.com/data_images/vendors/chevrolet/chevrolet-05.jpg" width="71" height="64">

      <p>CHEV</p>
    </li>


    <li>
      <img src="http://assets.volvocars.com/pt/~/media/images/galleries/new-cars/new-xc90/editions/gallery_module_1/gallery1_1_vcc08316.jpg" width="71" height="64">

      <p>VOLVO</p>
    </li>


    <li>
      <img src="http://www.maserati.com/mediaObject/redesign/models/GranTurismo-Sport/photogallery/granturismo-sport_04/original/granturismo-sport_04.jpg" width="71" height="64">

      <p>MASER</p>
    </li>

  </ul>

提前致谢。

Answer 1

从doctypedecl和[1] document ::= prolog element Misc* [22] prolog ::= XMLDecl? Misc* (doctypedecl Misc*)? [28] doctypedecl ::= '<!DOCTYPE' S Name (S ExternalID)? S? ('[' intSubset ']' S?)? '>' 移除浮动广告并将img添加到p会将其垂直居中。

现在，如果您想让图片适合其父元素，则必须从中删除display:inline-block和p属性。但是，width左边没有空间。这可以通过多种方式处理，其中之一就是限制height p（例如img}为width留出一些空间。

＆＃13;

＆＃13;

max-width:80%

＆＃13;

p

＆＃13;

＆＃13;

＆＃13;