CSS/Shopify 样式答案

【问题标题】：CSS/Shopify stylingCSS/Shopify 样式
【发布时间】：2020-10-03 12:29:54
【问题描述】：

我正在为某人开发 Shopify 模板，并且仍在学习 Liquid 和 HTML，真的是 javascript。

我正在努力对齐此页面上的徽标...

https://phoenixapparel.co.uk/password

目前我正在使用内联样式标签来执行此操作，因为它应该是一个简单的编辑，它非常基本，但我会很感激任何帮助。

这是带有 CSS 的液体模板；

<!doctype html>
<html lang="en">
  <head>
    <title></title>
  </head>
  <body>
    {% layout 'password' %}
    <div>
    <img src="https://cdn.shopify.com/s/files/1/0490/5022/2756/files/VECTOR_PHOENIX.svg?v=1601726832" style="display: block;margin-left:auto;margin-right:auto;">
      <h1 style="margin-left: auto;margin-right:auto;font-weight:900;color:black;text-align:center;">Coming Soon...</h1>
    </div
    {% comment %}
    {% section 'password-content' %}
    The contents of the password.liquid templates can be found in /sections
    {% endcomment %}
    {% section 'password-footer' %}
  </body>
</html>

在这里发帖似乎很愚蠢，但我尝试/发现的任何东西似乎都不起作用，所以任何东西都会有帮助。

【问题讨论】：

在您的问题中向我们展示 Shopify 模板对我们几乎没有用处，它依赖于您生成的 HTML 和 CSS。请您给我们看一下脚本/模板运行后生成的“minimal reproducible example”HTML 和 CSS？
shopify 模板的上下文与问题相关

标签： html css shopify liquid

【解决方案1】：

给 div 加一个类<div class="logo-align>...</div>

在 CSS 中：

.logo-align {
  width: the width you want;
  margin: auto;
}

不要忘记宽度，否则它不起作用

【讨论】：

【解决方案2】：

如果您只想在中间对齐徽标，请在该 div 上添加一个类并使用 display flex 将其对齐到中间或您想要的任何位置并且不要放置内联样式。在 shopify 的 assets 文件夹中应该有一个 style.scss 文件，用于添加 CSS

.logo-align {
display: flex;
justify-content: center;
}

【讨论】：