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

Question

我有一个 wordpress 网站discingup.com，但在平板电脑和移动设备上对齐时遇到问题

这是手机上的：

这是在平板电脑上

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

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

但觉得我一定是错过了什么。理想情况下，我只希望文本位于手机和平板电脑上的图像下方。

提前致谢。

标签： htmlcsswordpress

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规则。