【サンプルコード付き】CSSで要素を左寄せ・右寄せ・中央寄せする方法

2024.01.03
CSSで要素を左寄せ・右寄せ・中央寄せする方法

「CSSで画像を左寄せしたい」
「左寄せになっている要素を中央寄せするにはどうしたらいいんだろう?」

上記のように考えていてこの記事にたどり着いた方も多いのではないでしょうか?

CSSで左寄せや右寄せのように水平移動するには、HTML要素の特徴に合わせてプロパティを使い分ける必要があります。

今回WEBCAMP MEDIAでは、CSSで要素を左寄せ・右寄せ・中央寄せする方法について、サンプルコードを用いて解説します。

  • インライン要素を水平移動する方法
  • 要素自体を水平移動する方法

以上の項目について解説します。

この記事を読むことで、CSSを使って要素を自在に水平移動できるようになるので、ぜひチェックしてみてくださいね!

CSSのtext-alignで要素内の値を左寄せ・右寄せ・中央寄せする

text-alignはCSSプロパティの一種で、指定したブロック要素の中にある要素を水平方向に移動できます。

text-alignに指定できる値は下記の通りです。

  • center:ブロック要素の中にある要素を中央寄せにする
  • right:ブロック要素の中にある要素を右寄せにする
  • left:ブロック要素の中にある要素を左寄せにする

上記のようにtext-alignに特定の値を指定することで、要素を左寄せ・右寄せ・中央寄せの3方向へ移動できます。

text-alignを使って要素を移動する方法についてサンプルコードで解説します。

サンプルコード

HTML

<body>
  <div class="center">
    <img src="pic/icon.png">
  </div>
  <p class="left">左寄せ</p>
  <p class="right">右寄せ</p>
</body>

CSS

.center{
    text-align: center;
    background-color: aqua;
}
.left{
    text-align: left;
    background-color: beige;
}
.right{
    text-align: right;
    background-color: chartreuse;
}

上記コードでは、ブロック要素であるdivタグとpタグを用意し、インライン要素であるimgタグで指定した画像と文字を水平移動しています。

実行結果

実行結果

pタグ内の文字や画像を水平移動したいときは、親要素であるブロック要素にtext-alignを指定すると移動できます。

CSSのmarginで要素自体を左寄せ・右寄せ・中央寄せする

marginとは、要素の外側の余白を調節するCSSプロパティです。

marginで要素自体を移動するには、widthプロパティで要素の横幅を指定して移動したい場所の反対側にautoを指定します。

marginを始めて利用する方は、下記の記事で詳しく解説しているのでぜひチェックしてみてくださいね。

【初心者必見】CSSのmarginを理解して、余白を制する

実際の指定方法についてサンプルコードを用いて解説していきます。

サンプルコード

HTML

<body>
  <p class="center">中央寄せ</p>
  <p class="left">左寄せ</p>
  <p class="right">右寄せ</p>
</body>

CSS

.center, .left, .right{
    width:300px;
}
.center{
    margin: 0 auto;
    background-color: aqua;
}
.left{
    margin-right: auto;
    background-color: beige;
}
.right{
    margin-left: auto;
    background-color: chartreuse;
}

上記コードでは、移動したいブロック要素に「width:300px;」で横幅を指定しています。

各要素に指定している「auto」という値には、余った余白を全てmarginにするという働きがあります。

そのため、要素を左寄せにしたいときは、反対方向である右側に「margin-right: auto;」を指定することで要素の幅以外の余白がmarginとして右側に指定されます。

サンプルコード

同様の理由で、右寄せするときは左にmarginでautoを指定し、中央寄せするときは左右にmarignでautoを指定します。

チェックポイント
marginで要素を移動するときはwidthで横並び指定して余白を作らないうまくいかない点に注意しましょう。

まとめ

今回は、CSSで要素を左寄せ・右寄せ・中央寄せする方法について解説しましたが、いかがでしたでしょうか?

ブロック要素内にある要素を移動するにはtext-alignを使い、要素自体を移動するにはmaringを使います。

要素を水平移動する方法はWeb制作でよく利用するので、この記事をきっかけに覚えておくとよいでしょう。

ほかにも、flexboxを使った移動方法もあるので、気になる方は下記の記事もチェックしてみてくださいね。

【習得必須】CSSのflexboxでレイアウトを自由自在に操る

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5