如何将左对齐的图像集中在移动设备上

Question

我的主页上的图像将对齐。

虽然在桌面上看起来不错，但在移动设备上看起来不好

我正在尝试"中心"由.entry-image.attachment-post.gsfc-alignleft在移动视图上定义的图像。

我尝试了以下方面没有成功的情况：

@media all and (max-width: 675px) {
.entry-image.attachment-post.gsfc-alignleft {
   width: 100%!important;
   max-width: none;
   text-align: center;
   margin-left: auto!important;
   margin-right: auto!important;
  }
}

我的网站是：parlons-survivalisme.com

我缺少什么？

Answer 1

您需要将外部a标签设置为width: 100%，以使整个宽度上方的图像对齐。

例如：

a.alignleft {
  width: 100%;
}

Answer 2

正如卢卡（Luca）的建议，将代码更改为以下内容，它有效！

@media all and (max-width: 675px) {
a.alignleft {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
}

Answer 3

有2种直接的解决方案来集中图像。首先是将您的图像设置为"显示：内联块"，然后将其与外部div包装，将" Text-Align"属性设置为中心。

.wrapper-div {
  width: 100%;
  text-align: center
} 
.img {
  display: inline-block;
}

另一个解决方案是确保您的IMG是块元素（显示：块），然后将边缘权利和边缘左侧设置为自动。

.img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

如果您仍然有错误，请查看父元素宽度（以确保在小屏幕上100％）。