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

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

2024-07-102024-09-05

ケケンタ

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

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

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

をご紹介します。

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

ケケンタ

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

————

WordPressのスキルを伸ばしたい方におすすめの書籍

脱！WordPress初心者のための一冊

HTMLサイトをWordPressにする本 [ 久保田涼子 ]

created by Rinker

WordPressカスタマイズの基礎

WordPressユーザーのためのPHP入門　はじめから、ていねいに。　第4版 [ 水野史土 ]

created by Rinker

体系的に基本スキルを習得！

ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版 [ 小川欣一 ]

created by Rinker

上級者を目指すための一冊

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル[ 宮内隆行 ]

created by Rinker

Web技術への理解を深め、Webアプリ開発者を目指したい方へ

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか／小森裕介 (著)

by Amazon

プロになるためのWeb技術入門なぜ，あなたはWebシステムを開発できないのか [ 小森裕介 ]

created by Rinker

【全体像】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で位置を調整する