CSSで左右中央よせする簡単な方法【例を使って分かりやすく解説】

うーくん

CSSで文字を中央に配置したいんだけど、うまくいく時といかない時があるんだよな・・・

この記事ではこんな疑問にお答えします。

WEb制作の勉強を始めて最初の壁は、文字の配置です。

中央に配置にコツは「 text-align: center;」と「 margin: auto;」をうまく使うことです。

中央配置が理解できれば、左右によせることも簡単にできますよ。

cssで「 text-align: center;」を使って中央配置する

文字を中央配置する基本は「 text-align: center; 」です。

【HTML】
<div class=”center”>      
   <p class=”text”>ナルウェブ</p>   
 </div>

画面の表示

上のHTMLに対して、CSSで 「 text-align: center; 」 を指定します。

【CSS】
.text { 
    text-align: center;  
   }

はい。これで中央配置できました。

margin:autoを使う

「 text-align: center; 」 がうまくいかない時がありませんか?

それは、上の例でいうと、Pタグに幅がある時です。

【CSS】
.text { 
   width:300px
    text-align: center;  
   }

※わかりやすいように背景色をつけています。

同じ 「 text-align: center; 」 なのに、今回は動いてくれません。

「 text-align: center; 」 は、要素の中で中央配置になります。

幅を指定する前は、pタグの要素が「画面幅いっぱい」となっていたので、中央配置できました。

しかし、幅が300pxと指定されてしまうと、300px内で中央配置となってしまいます。

幅が300pxしかないので、見た目は動きませんが・・・。

こんな時は、どうするか?

答えは、 「margin:auto;」を使って、 「要素ごと中央配置してしまう」です。

【CSS】
.text { 
   width:300px
    margin:auto;
   }

できた!!

「margin:auto;」は、左右の余白を等間隔でとってくます。

だから、結果的に中央配置となるんです。

CSSで中央配置する方法

今回は、CSSで中央配置する方法について解説しました。

t中央配置するには、要素がどんな幅を持っているかを確認することが需要です。

ディベロッパーツールを使って確認してみてください。

この中央配置が理解できれば、「right」や「 left」をつかって、配置が可能になります。

ぜひ試してみてください。