【初心者必見】HTMLの要素や文字を自由自在に操る！右・左・中央に配置する方法を解説

HTML要素をCSSでスタイリングしている時に、「text-align:centerを指定したのに、文字が中央に行かない…」という問題に直面したことはありませんか？

文字だけでなく、「画像だけが中央に行かない…どうして？」と思ったこともあるでしょう。

そこで今回は、HTMLの要素や文字を左右中央に配置する方法を徹底解説します。

この記事を読んでわかる内容は、以下の通りです。

HTML要素を思い通りに配置できないと、動きをつけたり、微調整するなどの細かい作業まで手が回らなくなってしまします。

この機会に、HTML要素の配置を自由自在に操れるようになって、作業の効率や学習スピードを上げましょう！

displayの値（block・inline）で指定方法が異なる

HTML要素には、デフォルトでdisplayプロパティが定められています。

displayは、要素の高さや幅、表示形式を指定できるプロパティで、「block」「inline」「inline-block」「none」の4種類を指定することができます。

それぞれの性質により、配置の指定方法が異なるため、特徴を把握しておきましょう。

display	block	inline	inline-block
改行と並び	要素の前後に改行が入る	横に並ぶ	横に並ぶ
幅・高さの指定	両方指定できる	指定できない （文字の長さや大きさで決まる）	指定できる
余白の指定	上下左右のmargin・paddingを自由に指定できる	・左右のpadding・marginを指定できる ・上下のmarginは指定できない ・上下のpaddingも指定できるが、前後の行とかぶってしまう	上下左右のmargin・paddingを自由に指定できる
text-align	指定できない	指定できる	指定できる
例	p、div、h1～h6タグ	span、img、aタグ

なお、以前はこれらの要素は「ブロック要素」や「インライン要素」と呼ばれていましたが、最新のHTML5では廃止されています。

HTML要素や文字の左右配置を調整する方法

HTML要素の配置を調整する方法は、以下の4つ。

text-alignとmarginの特徴や、デフォルトの値なども含めてそれぞれの方法を詳しく解説していきます。

デフォルトは左上寄せ

全てのHTML要素は、デフォルトで左上寄せで配置されるように設定されています。

何も指定しない場合、以下のように左上に表示されるということです。

<!-- HTMLコード -->
<div class="box">
  <p>デフォルト</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
}

▼ブラウザ表示▼

【text-align】で文字や画像の配置を指定する

text-alignは、display:inlineの値がデフォルトで指定されている要素の配置を指定できるプロパティです。

主に、以下のような文章の一部として用いられることが多いです。

<!-- HTMLコード -->
<div class="box">
  <p>inlineの要素は<span>文章の一部</span>として使用されています</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
}

span {
  color: red;
}

▼ブラウザ表示▼

inlineは、基本的にblockの中で用いられていることがほとんど。

逆にinlineの中にblockを入れることはほとんどないという特徴があります。

では、実際の配置別にtext-alignの使い方を見ていきましょう。

text-align:left（左寄せ）

inlineの要素を左寄せしたい場合は、text-align:leftを使用します。

デフォルトで元々指定されている値なので、何も指定しなくても左寄せになります。

今回は、pタグに指定していきます。

<!-- HTMLコード -->
<div class="box">
  <p>text-align: left</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
}

p {
  text-align: left;
}

▼ブラウザ表示▼

pタグのdisplayはblockが初期値でtext-alignは指定できませんが、要素の中身のテキストには指定するとが可能です。

text-align:right（右寄せ）

inlineの要素を右寄せしたい場合は、text-align:rightを指定します。

<!-- HTMLコード -->
<div class="box">
  <p>text-align: right</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
}

p {
  text-align: right;
}

▼ブラウザ表示▼

text-align:center（中央寄せ）

inlineの要素を中央寄せしたい場合は、text-align:centerを指定します。

<!-- HTMLコード -->
<div class="box">
  <p>text-align: center</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
}

p {
  text-align: center;
}

▼ブラウザ表示▼

画像の配置は親要素に指定する

画像も文字（pタグ）と同様に扱うことができます。

ただし、imgタグの場合は、text-alignを親要素に指定します。

 <!-- HTMLコード -->
<div class="box">
  <img src="img/test_img.jpg">
</div>

/* CSSコード */
.box {
  background-color: #022e3f;
  text-align: center;
}

▼ブラウザ表示▼

3.【margin:auto】blockの要素を中央寄せする

display:blockがデフォルトで指定されている要素の配置は、marginで指定することができます。

では、実際にdivタグを左右中央に寄せてみましょう。

<!-- HTMLコード -->
<div class="box">blockの要素</div>

/* CSSコード */
.box {
  background-color: #cccccc;
  width: 100px; /* 横いっぱいに広がらないように指定 */
  margin: 0 auto;
}

▼ブラウザ表示▼

margin:0 autoは、「上下の余白は0に、左右の余白は自動で決めて」という意味になります。

左右の余白を自動で決まるようにすることで、要素が真ん中に配置されるようになるということです。

ただし、親要素の幅が狭い場合や、左に寄っている場合などは真ん中に配置されなくなってしまいます。

あくまでも「親要素の幅を基準に中央寄せになっている」ということになるので、親要素の幅や配置場所も注意しましょう。

おまけ：廃止になったタグ

おまけとして、要素の配置をコントロールできるHTMLタグを紹介します。

ただし、これから紹介するタグはHTML5の仕様により廃止されているので、現在は使用することができません。

現在は、装飾はCSSで行うことが推奨されているので、実際には使用しないようにしましょう。

【centerタグ】

<!-- HTMLコード -->
<center>
  <p>HTML5から削除された文字を中央寄せするcenterタグです。</p>
</center>

【align属性】

<!-- HTMLコード -->
<table>
  <tr>
    <td align="left">左寄せ</td>
    <td align="right">右寄せ</td>
    <td align="center">中央寄せ</td>
  </tr>
</table>

HTML要素や文字の上下配置を調整する方法

HTML要素は、左右だけでなく、上下の配置も指定することができます。

marginを使用して余白を調整することで、上下の配置を指定することもできますが、他にも以下のような方法があります。

では、それぞれの方法を解説していきます。

【line-height】1行の文章を上下中央に配置する

line-heightは、1行の高さを指定することができるプロパティです。

基本的には、行間を指定したい時に使用するプロパティですが、以下のように指定することで要素を上下中央に配置することが可能です。

<!-- HTMLコード -->
<div class="box">
  <p>line-heighで文字を上下中央に配置します</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
  height: 150px;
}

p {
  line-height: 150px;
}

▼ブラウザ表示▼

親要素の高さ（height）と子要素の高さ(line-height）を合わせれば、自動的に上下中央に配置されるという仕組みです。

ただし、これは1行の場合にのみ使用することができる方法です。

2行以上になると2行目が親要素からはみ出してしまうので、注意しましょう。

【position:absolute】2行以上の文章を上下中央に配置する方法

positionは、要素の配置場所を指定できるプロパティです。

主に、画面の決まった位置に要素を固定したり、別の要素の上に要素を重ねてのせたり、要素の位置を数値で指定したりする目的で使用されます。

2行以上の文章の上下を中央寄せしたい場合は、現在の位置を基準に相対的な位置を決める「relative」と、親要素を基準に絶対的な位置を決める「absolute」を使用します。

<!-- HTMLコード -->
<div class="box">
  <p>position:absoluteで文字を上下中央に配置します<br>
    文字のズレはtransformで補修しています</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
  height: 150px;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) /* ズレを補修 */
}

▼ブラウザ表示▼

HTML要素や文字を上下左右中央に配置する方法

上下中央や左右中央だけでなく、ど真ん中に配置したい！という場合には、以下の方法を使用します。

では、それぞれの方法について解説します。

1.flexbox

flexboxとは、簡単に説明すると「様々なサイズの要素を、綺麗に整えて並べてくれる機能」です。

ど真ん中に配置するには、以下のように指定します。

<!-- HTMLコード -->
<div class="box">
  <p>flexboxで文字を上下左右中央に配置します</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

p {
  display: block;
  width: 350px;
  background: #FFF;
}

▼ブラウザ表示▼

2.position: absoluteとtransform

positionプロパティとtransformプロパティを一緒に使用すれば、ど真ん中に要素を配置することができます。

position: absoluteで以下のように指定すれば上下左右中央寄せになると思われがちですが、実際には少しだけズレて表示されてしまいます。

<!-- HTMLコード -->
<div class="box">
  <p>position: absoluteで文字を上下左右中央に配置します</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
  position: relative;
  height: 200px;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
}

▼ブラウザ表示▼

これを修正するのに役立つのがtranformプロパティです。

<!-- HTMLコード -->
<div class="box">
  <p>position: absoluteで文字を上下左右中央に配置します<br>transformで文字のズレを補正しています。</p>
</div>

/* CSSコード */
.box {
  background-color: #cccccc;
  position: relative;
  height: 200px;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  text-align: center;
}

▼ブラウザ表示▼

様々なCSSプロパティを使いこなしてHTML要素・文字を中央に配置してみよう！

今回は、文字や画像などのHTML要素を上下・左右中央に配置する方法を解説しました。

以下は、この記事のまとめです。

CSSには、HTML要素の配置を指定する様々な方法があります。

inline・blockでできる指定の違いや、左右中央・上下中央、ど真ん中のどこに配置したいのかなどで使い分けられるように、今回ご紹介した複数の指定方法を覚えておきましょう！

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！