ケケンタ

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

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

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

をご紹介します。

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

ケケンタ

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

あわせて読みたい

【超簡単！】liタグの点の大きさや色などを変える方法【HTML/CSS】 liタグの「点」の見た目って変えられないのかな…… 今回はこのようなお悩みをお持ちの方へ向けて liタグの点の大きさや色、フォントなどを変える方法 をご紹介します。 l…

あわせて読みたい

【超簡単】Javascript無しで「スムーススクロール」のトップへ戻るボタンを実装 この記事では Javascriptを使用せずに「スムーススクロール」のトップへ戻るボタンを実装する方法 について解説します。 スムーススクロールのトップへ戻るボタンは、も…

あわせて読みたい

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE Web制作を仕事にしたいけど、プログラミングスクールに通うには費用がかかりすぎる……けど、独学だと相談相手もいないから、挫折しないか心配…… こうした悩みをお持ちの…

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

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

ケケンタ

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

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

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

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

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

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

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

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

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

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

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

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

【方法②】positionを使用する

div {
    position: relative;
}

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

aタグを「左右」、「上下左右」中央寄せにする方法は他にもある

以上がこの記事でご紹介する

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

でした。

実を言うとこれ以外にも方法はあるのですが、今回はその中でも比較的取り入れやすく、また他の要素にも活用しやすいと思うものをご紹介しました。

CSSは簡単なように思えて少し複雑な側面も持ち合わせています。

経験が浅い内はその都度方法を調べることになるとは思うのですが、コーディング経験を積むうちに「パターン」や「法則」のようなものが見えてきます。

今回ご紹介した方法も、まさにその内のひとつです。

ケケンタ

この記事が少しでもお役に立ったなら何よりです。

それでは、また別の記事でお会いできれば光栄です。

最後までご覧いただきありがとうございました。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...