CSS ボタン(テキスト)の中央揃えについて質問です。

Question

お世話になります。画面の中央に以下ボタンを配置する事ができず困っています。作成したhtmlとCSSは以下になります。画面の横からみて中央にボタンを配置する方法をご教示ください。

#やりたいことイメージ
現在
sample　　　　　　　　　　　　　　　　　　　

将来
□□□□□□□□□□sample□□□□□□□□□□

現在左にsampleというボタンが配置されてしまうため、右に移動し画面の中央部分にsampleを配置したいです。

#HTML

<a href="#" class="cp_btn">sample</a>

Comments

[yambejp]

> 中央にボタンを配置

なんの中央にでしょうか？
縦方向、横方向？

[退会済みユーザー]

失礼しました。横方向になります。イメージは以下になります。現在は左に配置されてしまっているので、左ではなく中央に配置したいです。縦方向ではありません。□はスペースです。

現在
sample　　　　　　　　　　　　　　　　　　　

将来
□□□□□□□□□□sample□□□□□□□□□□

Answer 1

a.cp_btn にmargin:autoを追加してください

Comments

[退会済みユーザー]

ありがとうございます。

Answer 2

a.cp_btnにmargin: auto;を追加するとかじゃダメでしょうか？

a.cp_btn {
    color: #FF5722;
    position: relative;
    display: block;
    width: 160px;
    padding: 0.8em;
    text-align: center;
    border: 3px solid #FF5722;
    text-decoration: none;
    outline: none;
    transition: all .4s;
    margin: auto; /* add */
}

Comments

[dit.]

（解決してたし0いらなかったので修正）

[koikogarey]

なるほど！

Answer 3

a.cp_btn {
    margin-right: auto;
    margin-left: auto;
}