如何在wordpress网站上更改图像和文本的对齐方式？

Question

我有一个wordpress网站dishingup.com，并且在平板电脑和移动设备上的对齐方式有问题

它在移动设备上：

这是在平板电脑上

我尝试在WordPress自定义中添加以下CSS

@media only screen and (max-width: 767px) {
    figure.alignleft, img.alignleft, figure.alignright, img.alignright {
        float:none;
    }
}

但是，我必须丢失一些东西。理想情况下，我只希望文字位于手机和平板电脑上的图片下方。

谢谢。

Answer 1

您为桌面模式添加的自定义CSS代码会影响较小设备上的元素，因此您需要覆盖它：

最有可能将其添加到您的CSS中将有所帮助：

.list-category li {
  display: flex;
}
@media(max-width: 767px) {
  .list-category li {
    flex-direction: column;      
  }
  .list-category li > a {
    margin: 0 auto;
  }
  .list-category li .custom-content {
    width: auto;
    margin: 20px;
    padding-left: 0;
  }
}

如果您不希望图像居中，请删除margin:0 auto规则。