ボタンが画面中央に配置されない

前提・実現したいこと

HPの作成で、HTMLとCSSでボタンの作成をしています。
画面中央に配置したいです。

発生している問題・エラーメッセージ

他の記事など参考に試しているのですが、
現在は左寄せになっています。

該当のソースコード

HTML

<a href="#" class="btn">登録ボタン</a>

CSS

.btn{
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    color: #FFF;
    text-decoration: none;
    background: #fd9535;
    border-bottom: solid 2px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;

試したこと

text-align;center
margin

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

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

親タグにtext-align: centerを入れてみてはどうでしょう？

html
1<div style="text-align: center;">
2  <a href="#" class="btn">登録ボタン</a>
3</div>

投稿2018/05/01 05:30

root_jp

総合スコア4666

star5638

2018/05/01 05:45

root_jp 様回答いただきまして、ありがとうございます。親タグの方に追加したところ、中央に配置ができ解決いたしました。本当にありがとうございました！

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

inline-block要素を中央寄せする場合は親要素にtext-align:center;を指定すれば中央寄せになります。

html
1<div class="wrap">
2<a href="#" class="btn">登録ボタン</a>
3</div>

css
1.wrap {
2  text-align:center;
3}
4.btn{
5    position: relative;
6    display: inline-block;
7    padding: 0.25em 0.5em;
8    color: #FFF;
9    text-decoration: none;
10    background: #fd9535;
11    border-bottom: solid 2px;
12    border-radius: 4px;
13    font-weight: bold;
14/*     margin-left: auto;
15    margin-right: auto; */
16  ｝