画像にテキストを重ねる方法【コード公開】

画像の上にテキストを良い感じで重ねる方法を公開します。

Bootstrap使ってて画像の上にテキストを重ねることできねぇーぜって方はぜひ参考にしてみてください。

初心者向けで自分が見返してもわかるように、簡単に解説も入れてみました。

コードはシンプルです。
コピペして使ってください。

画像

画像はbackground-imageで背景として表示しています。
背景画像の高さを大きくしすぎて、画像が良い感じにならないって方は、background-position:center;を追加してみてください。

画像にテキストを重ねる

また画像にテキストを重ねるために、画像とテキストにdisplayを設定してやります。
画像 → display:table
テキスト → display:table-cell

これだけです。

テキストの位置

テキストを画像の中心(高さ)に持ってきたいので、vertical-align: middle;を設定しています。

下に持ってきたい人は、vertical-align: bottom;で設定すると良い感じになります。

以上です。

〜おすすめ記事〜

【フリーランス向け】HTML、CSSスキルを身につけてコーディング案件を受注する方法【月5万稼ぐ】

2018.04.07

【フリーランス初心者】プログラミング勉強開始2ヶ月で10万円稼ぐノウハウ公開します【実体験】

2018.01.02