この記事にはプロモーションが含まれています。

aタグを左右中央寄せや上下左右中央寄せにする４つの方法【HTML/CSS】

2024-07-102024-09-05

ケケンタ

aタグを「左右」や「上下左右」中央寄せにしたいんだけど、なんだか上手く行かない……

今回はそのようなお悩みをお持ちの方に向けて

aタグを「左右」中央寄せや「上下左右」中央寄せにする方法

をご紹介します。

aタグを「左右」中央寄せや「上下左右」中央寄せにするための方法は実を言うといくつかあり、特に初心者の方がつまずきやすいところでもあるかと思います。

ケケンタ

この記事が少しでもお役に立てば何よりです！

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

【全体像】aタグを「左右」中央寄せや「上下左右」中央寄せにする方法

aタグを「左右」中央寄せや「上下左右」中央寄せにする方法には、具体的に以下のようなものがあります。

aタグを「左右」中央寄せにする方法

text-align: cetnterを使用する
aタグをブロック要素にする

aタグを「上下左右」中央寄せにする方法

flex-boxを使用する
positionを使用する

ケケンタ

以下より、それぞれの方法についてご紹介します！

前提として、この記事では以下のようなHTML構造を元にaタグを「左右」、「上下左右」中央寄せにする方法を解説します。

この記事で使用するHTML構造

<div>
    <a href="#">aタグ</a>
</div>

aタグを「左右」中央寄せにする方法

【方法①】text-align: cetnterを使用する

div {
    text-align: center;  /* テキストが左右中央揃えになる */
}

親要素（divタグ）にtext-align: center;を設定する
text-align: center;により、div要素内のテキストが左右中央寄せになる

【方法②】aタグをブロック要素にする

div a {
    display: block;      /* １．aタグをブロック要素にしてmarginが効くようにする */
    width: fit-content;  /* ２．ブロック要素になり親要素いっぱいになった横幅をテキスト幅に合わせる */
    margin: 0 auto;      /* ３．左右中央寄せにする */
}

aタグをブロック要素にする（marginが効くようにするため）
ブロック要素になったaタグは親要素（div要素）いっぱいに広がるため、横幅をテキスト幅に合わせる
margin: 0 auto;で左右中央寄せにする

aタグを「上下左右」中央寄せにする方法

【方法①】flex-boxを使用する

div {
    display: flex;           /* １．aタグをflex要素にする */
    justify-content: center; /* ２．左右中央 */
    align-items: center;     /* ３．上下中央 */
}

aタグをflex要素にする
flex要素専用のプロパティ「justify-content」、「align-items」で上下左右中央寄せにする

【方法②】positionを使用する

div {
    position: relative;
}

div a {
    position: absolute;
    /* 上下左右中央寄せ */
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

親要素（div要素）にposition: relative;を設定する
　⇒　これにより子要素の「position: absolute;の基準」が親要素の「左上」になる
aタグにposition: absolute;を設定する
aタグをtop: 50%;とleft: 50%;で中央に寄せる
ただし、それだけだと完全な「上下左右中央寄せ」にはならないため、transformで位置を調整する