text-align: center;　が効かない理由

前提

ここに質問の内容を詳しく書いてください。
コーディング初学者です。何卒よろしくお願いいたします。
HTM及びCSSを用いてa要素を中央寄せにしたいと考えております。
text-align: center;を用いて中央寄せにしようと考えています。
a要素はinline要素なのでdisplay: inline-block;に変更をしたのですがうまくいきません。
解決方法をアドバイスください。
何卒よろしくお願いいたします。

実現したいこと

a要素を中央寄せにしたいです。

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

text-align: center;が効かない。
a要素をblock要素に変更しているはずなのに

### 該当のソースコード

```ここに言語名を入力
<! -- html -- >
 <a class="top" href="../toppage/index.html">Topへ</a>

/* css */
.top {
  display: inline-block;
  text-align: center;
  background: pink;
  border: none;
  padding: 10px 20px;
  color: white;
  font-size: 17px;
  font-weight: bold;
  border-radius: 5px;
  margin-top: 20px;
  box-shadow: 1px 1px 3px black;
  cursor: pointer;
}

試したこと

a要素をblock要素へ変更し、text-align: center;としてみました。

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

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

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

回答1件

ベストアンサー

text-align: centerは、その中身のインライン系の要素を中央揃えにします。
.topの中身のインライン系の要素は「Topへ」ですので、その文字をaタグの中で中央に寄せます。
aタグ自身を中央に配置したい場合は、aタグの親要素にtext-align: centerを書きます。

html
1<div class="container"> <!-- 追加 -->
2  <a class="top" href="../toppage/index.html">Topへ</a>
3</div>

css
1/* 追加 */
2.container {
3  text-align: center;
4}
5
6.top {
7  display: inline-block;
8  text-align: center;
9  background: pink;
10  border: none;
11  padding: 10px 20px;
12  color: white;
13  font-size: 17px;
14  font-weight: bold;
15  border-radius: 5px;
16  margin-top: 20px;
17  box-shadow: 1px 1px 3px black;
18  cursor: pointer;
19}