Shopifyのボタンをセンターに配置させたい

前提・実現したいこと

Shopifyの技術担当者が居なくなり、急遽HTML初心者が対応しており困っております。
初期設定のボタンの位置が左寄せになっており、中央配置させたいです。

該当のソースコード

HTML/CSS
1<a href="https://該当のURL/soopee-%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%AB%E3%83%97%E3%82%B9%E3%83%91%E3%83%BC%E3%82%AF%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%BB%E3%83%A9%E3%83%A0?variant=40689964089540" class="btn hero__btn">予約販売はこちらから</a>

試したこと

HTMLのボタンのセンタリングについて検索し、
タグを試しに入れたりを試みましたが、基本知識がないので、
遠回りをしてしまい一から勉強することになってしまい時間がいくらあっても足りません。。

補足情報（FW/ツールのバージョンなど）

Lhankor_Mhy

2022/01/05 06:07

ご提示のコードの部分だけでは何とも言えない感じです。

harami_

2022/01/05 06:53

HTMLのリンクタグを提示いただいていますが、こちらのaタグもしくは該当のクラス名にCSSで装飾を書き加えてセンタリングしているはずです。このaタグが何か別のタグに内包されているのか、現状どういったCSSが当たっているのかが分からないので回答が難しい状況です。

masmad

2022/01/05 07:14

ご指摘いただきまして誠にありがとうございます。テンプレート編集画面の『HTMLをカスタムする』という箇所には上記のHTMLタグしか書かれておりませんでしたので、このタグに対して”センターに配置する” というタグを入れれば済むのかと思い込んでおりました。また袋小路になってしまいましたが、この度はありがとうございました。

行動規範の内容に同意します

回答2件

html
1<div class="center">
2<a href="https://該当のURL/soopee-%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%AB%E3%83%97%E3%82%B9%E3%83%91%E3%83%BC%E3%82%AF%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%BB%E3%83%A9%E3%83%A0?variant=40689964089540" class="btn hero__btn">予約販売はこちらから</a>
3</div>

css
1.center {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5}

このようにHTMLとCSSを修正すればボタンが画像のように中央寄りになると思います

投稿2022/01/05 07:43

mochi425

総合スコア8

masmad

2022/01/05 08:02

ご回答いただきまして誠にありがとうございます。素敵なご好意を真摯に受け止め、上記を試してみましたが、元々のテンプレート機能が効いてしまっているようでセンターにならず、CSS以降のテキストがプレビュー画面で表示されてしまいました。このような現象がなぜ起きているのか私には全くわかりませんでした。

行動規範の内容に同意します

ご提示の部分だけとのことなので、周辺のコードによっては上手くいかないかもしれませんが、以下のようにしてはどうでしょうか。
（IE11は非対応）

html
1<a href="https://該当のURL/soopee-%E3%82%B9%E3%82%AD%E3%83%A3%E3%83%AB%E3%83%97%E3%82%B9%E3%83%91%E3%83%BC%E3%82%AF%E3%83%AA%E3%83%B3%E3%82%B0%E3%82%BB%E3%83%A9%E3%83%A0?variant=40689964089540" class="btn hero__btn" style="display:block;width:max-content;margin:0 auto">予約販売はこちらから</a>