CSSで画像の中央に文字を配置する方法【基本を理解すれば簡単】

cssで文字を真ん中にする画像
〈かみぱにゃい〉
CSSで文字を画像の上下左右揃えて、真ん中に表示させたいけど、どうすればいいの??
〈そろり兄やん〉
お任せあれ!!!!!

この記事は以下の疑問に答えます。

記事のテーマ
●画像や背景の中央に文字(サイトタイトル)を表示したい
●他の箇所でも同じ考えで応用できるようにしたい
●現在、主流のコードの書き方で作りたい

この記事を書く僕のことを軽く紹介しておきます。

僕は現在、Web会社でフロントエンドエンジニアをしています。HTML/CSS/JSを使用したコーディングという業務もバリバリしています。なので、現在現場で使われているコードの書き方を紹介できます。

CSSで画像の中央に文字を配置する方法

CSSで画像の中央に文字を表示させるのはとても簡単です。

最初に今回使う核となるコードを伝えます。

「position」と「transform」です。

画像や背景に文字を重ねるイメージでしょうか。

覚えてしまえば、お好みの位置に文字以外も配置できるようになっちゃいます。

それでは早速いってみましょうー!!

文字を中央配置するコード解説

今回、作りたいの物はこんな感じ。
「HTML」「CSS」「Result」のタブをクリックしてもらえれば、コードを確認できます。

See the Pen KKVgwXY by そろり兄やん (@sororiniyan) on CodePen.

デザインは例の如く最低限で実装しています。

まずは、配置させたい文字の親要素にあたる、<div class="wrap">position: relative;のスタイルを指定します。

その次に、配置させたい文字(子要素にすること)
<h1 class="title">タイトル</h1>position: absolute;を指定して準備完了です。

その後は上下左右揃うようにまずは下記のように

top: 50%;
left: 50%;

上から半分、左から半分の位置に指定します。
ここでどこを基準??と思われたかもしれません。

先ほど準備したのを振り返りましょう。
「position: relative」を親要素に指定しましたね!!
親要素を基準にして動きます。
このとき、動かしたい子要素に「position: absolute」が指定されてる必要があります。

transform: translate(-50%,-50%);

最後にこれを指定します。
この指定をしない場合で表示を確認すると分かるのですが、
子要素のどの部分を真ん中の配置するか指示しています。

デフォルトでは、子要素の左上が親要素の中央に配置されます。
なので子要素の中央が親要素の中央に配置される、おまじないです。

wrapに当てているスタイル

width: 300px;
margin: 0 auto;

これの意味は単に幅を指定し全体を真ん中に表示させています。
今回のお題には関係ないですが、「margin: 0 auto」は良く使う手法なので覚えておいて、損はないです。

position: relative;

こちらを指定することで、どれに対して配置させるかの
どれ!?を指定しています。

imageに当てているスタイル

一応、説明しておくと
コンテンツ幅(今回は「wrap」の300px)いっぱいに横幅を表示させて、
縦幅は自動で計算させています。

titleに当てているスタイル

font-size: 30px;
font-weight: bold;
color: blue;

文字のデザインです。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

上で説明した通り、
今回のお題のメインコードです。

親要素の画像に対して、
文字を上下と左右揃えて、中央に表示させています。

まとめ

まとめ(本の絵)

今回のコード解説は以上です。

この「position」をマスターすれば
色んな要素を重ねて表示させたりできます。

良く使われるのは、サイトのheroと呼ばれているエリア!!
このサイト例にするとここです!

heroの例

応用もできるので、是非試してみてください。

僕の記事をお読みいただくと、
誰にでも分かりやすくコード解説しているので、興味があれば他の記事もお読みいただけると嬉しいです。

以下に今回の大事なポイントをまとめます。

まとめ
親要素に「position: relative」
●子要素に「position: absolute」

以上です。
ありがとうございました。

〈そろり兄やん〉
それでは!
よきプログラミングLifeを!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA