如何在移动设备上将左对齐图像居中？

Question

我主页上的图像左对齐。

虽然it looks great on desktop，它does not look good on mobile

我试图将.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

有两种直接的解决方案可以使图像居中。第一种方法是将图像设置为'display：inline-block'，然后使用外部div将其包装，将“text-align”属性设置为居中。

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

另一种解决方案是确保你的img是一个块元素（显示：块），然后将margin-right和margin-left设置为auto。

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

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