<a>タグを中央ぞろえにしたい

divタグの場合は中央ぞろえができるのですが、<a>のリンクの場合だとフォントサイズと色の変更だけが効き、中央ぞろえができませんでした。

<html>
    <head>
        <meta charset="UTF-8">
        <title>時間割登録用サイト</title>
        <style type="text/css">

            body {

                background-image: url(picture/background%20picture1.jpg);

            }
            .top{
                font-size: 1.75rem;
                color: white;
                text-align: center;
            }
            a:link{
                font-size: 1.25rem;
                color: red;
                text-align: center;
            }
            a:visited {
                font-size: 1.25rem;
                color: yellow;
                text-align: center;
            }
        </style>
    </head>
    <body>
       <div class="top">時間割登録サイト</div>
        <div class="top">あなたの年次を選択してください。</div>
        <a href="HTML/first.html">1年次　検索機能なし版</a>
        <a href="first-plus.html">1年次　検索機能・手打ち機能追加版</a>
        <a href="second.html">2年次以上 検索機能なし版</a>
        <a href="second-plus.html">2年次以上　検索機能・手打ち機能追加版</a></div>
    </body>
</html>

試したこと

<a>タグ全体を<diV>で囲んで中央揃えにしようともしたのですが、text-alignが効きませんでした

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

回答2件

ベストアンサー

こういうことかな。

css
1a {
2  display: block;
3  text-align: center;
4  font-size: 1.25rem;
5}
6a:link{
7  color: red;
8}
9a:visited {
10  color: yellow;
11}

こっちの方がいいかも。

css
1a {
2  display: block;
3  width: max-content;
4  margin: 0 auto;
5  font-size: 1.25rem;
6}
7a:link{
8  color: red;
9}
10a:visited {
11  color: yellow;
12}

投稿2020/11/21 15:54

編集2020/11/21 16:12

hatena19

総合スコア34053

退会済みユーザー

2020/11/22 02:58

下のa{はインライン要素をブロック要素に変更したあとに、文字の幅を0でなおかつブラウザが適切な幅にするようにし、文字同士の間隔を0にしてあるということは分かったのですが、文字同士の間隔について最大で指定しているのはなぜでしょうか？

hatena19

2020/11/22 03:05

文字間隔は設定してません。インライン要素では幅を設定できないので、ブロックレベル要素に変換して、その幅を中身の最大幅（=テキストの幅）に設定しています。 margin: 0 auto; で左右にマージンをautoにすることで左右のマージンが均等になり中央寄せになるということです。

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

<a>タグ全体を<diV>で囲んで中央揃えにしようともしたのですが、text-alignが効きませんでした

<div>で囲んで、そのdiv要素にtext-alignを指定しましたか?

html
1<div class="grades">
2	<a href="HTML/first.html">1年次　検索機能なし版</a>
3	<a href="first-plus.html">1年次　検索機能・手打ち機能追加版</a>
4	<a href="second.html">2年次以上 検索機能なし版</a>
5	<a href="second-plus.html">2年次以上　検索機能・手打ち機能追加版</a></div>
6</div>

css
1.grades {
2	text-align: center;
3}

これで、横並びで連なった4つのa要素が、ページの中央に表示されると思います。
ブラウザの幅を十分に広げないと分からないかも。

投稿2020/11/21 15:38

gpsoft

総合スコア1323

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

<a>タグを中央ぞろえにしたい

試したこと

関連した質問