CSS/Shopify 造型

Question

我正在为某人开发 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>

这里的 post 似乎很愚蠢，但我没有任何东西 tried/found 似乎有用，所以任何东西都会有所帮助。

Answer 1

把class放到div<div class="logo-align>...</div>

在 css 中：

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

不要忘记宽度，否则无法正常工作

Answer 2

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

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

CSS/Shopify 造型

CSS/Shopify styling

html

css

liquid

shopify