Question

我正在使用仅允许HTML编辑的界面来处理工作项目。查看我正在创建的页面的用户将通过移动设备查看它们。我要放置的图像在段落上方。我需要的是将图像居中。

我创建了一个示例，该示例看起来在大屏幕上居中，但在较小的屏幕上将图像稍微向右移动。有人可以让我知道这是怎么回事吗？

.image {
  width: 382px;
  height: 135px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

<img src="image.jpg">

编辑：在最后的疯狂中，我忘了提到我已经分配了一个班级：“图像”。

Answer 1

您需要将样式应用于图片

.image {
  width: 382px;
  height: 135px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

<img src="image.jpg" class="image">

Answer 2

将点（。）放在前面时，会将其注册为类名。因此，只需将一个名为image的类添加到img标签即可。

<img src="image.jpg" class="image">

Answer 3

您需要@media才能实现。媒体将根据屏幕尺寸更改CSS样式。顺便说一句，可以在图像中添加类 image 或只在CSS样式表中使用 img ，不建议仅使用 img 会影响所有其他img，因此只需使用

HTML：

<img class="image" src="...">

CSS：

//you can change min-width and max-width based on your desires
@media (min-width: 1px) and (max-width: 767px) {
.image {
   text-align: center
   //you can add any other style in here
   }
}

如何将移动屏幕的图像居中（使用HTML）？

3 个答案: