【CSS】画像の上に中央揃えで文字列を配置する方法

ヘッダーを好きなところに配置する

ウェブサイトを作成し始めると、ヘッダー画像の上に文字列を中央に配置したいなと思うときがあります。しかもすぐに…。

ここでは画像の上にmarginとalignで文字列を配置調整するのではなく、positionプロパティとtransformプロパティで要素を思いのままに配置する方法を解説します。

【INDEX】－目次－

親要素の中央配置
positionプロパティ
transformプロパティ
ヘッダー画像に文字列を中央配置

親要素の中央配置

配置を検証するにあたり、下記のように準備します

要素	名称	備考
親要素	parentbox	画像（背景画像）
子要素	childbox	枠線（白）
文字列	h1	白文字

※子要素の枠線はわかりやすく表示するためでもあります。

親要素の上に子要素を配置するhtml

html

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="contents">
<div class="parentbox">
<img src="picture/goethe760.jpg" width="800" height="500" alt="";>
<div class="childbox">
<h1>ゲーテは言った…</h1>
</div>
</div>
</div>

positionプロパティを使って、親要素parentboxにchildboxを配置します。

sample.css

.parentbox {position: relative;
                 margin: 0 auto;　/*領域がセンターへ*/
                 text-align: center;　/*要素がセンターへ*/
                 width:1200px;
                 height: 550px                 
               } 

.childbox {
                 position: absolute;
                 padding: 10px;
                 width: 400px;
                 height: auto;
                 border: solid 5px #fff;
                 text-align: center;　/*文字列の中央揃え*/
                } 

h1 {
                 display: inline-block;　/*折返したら左揃え*/
                 text-align: left;
                 color: #fff
               }

positionプロパティの基準点

positionプロパティの基準点は左上です。位置を指定していないので左上に子要素がきています。

子要素の位置を移動させるには、childboxにオフセットプロパティ（top、left、right、bottom）で位置指定します。

positionプロパティの値

static	初期値
relative	基準位置からの相対位置
absolute	親要素の左上を基点とした絶対位置
fixed	固定位置

※staticには位置指定オフセットプロパティは利きません。

オフセットプロパティ

top	基準点（左上）から数値移動
left	基準点（左）から数値移動
right	基準点（右）から数値移動
bottom	基準点（下）から数値移動

オフセットプロパティで位置指定

.childbox {/* 省略 */
                text-align: center;　/*文字列の中央揃え*/
                top: 50%;
                left: 50%
                }
              /* 以下省略 */

上記追記し、基準点より上から50%、左から50%右へ移動させます。

子要素childboxの左上が親要素（画像）の中央にきました。

transformプロパティ

オフセットプロパティ（top、left）の下にtransformプロパティを下記のように記入し移動させます。

.childbox {/* 省略 */
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
  }
/* 以下省略 */

※h1に直接指定してしまうとh1高さを考慮する必要がでてしまうためやりません。

transformに指定できる関数

関数名	動き
translate	移動
rotate	回転
scale	伸縮率
skew	傾斜

どうしてこうなる？

応用：トップバナー（背景画像）に文字をのせる

完成系のイメージ

参考画像

横幅いっぱいの画像の中央に文字列配置

html

<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="contents">
<div class="parentbox">
<div class="childbox">
<h1>ゲーテは言った…真の知識は、経験あるのみだと</h1>
</div>
</div>
</div>

横幅いっぱいの画像の上にヘッダーを中央に配置するCSS

sample.css

.contents {
            background: #ccc;
            background-image: url(picture/goethe760.jpg);
            background-repeat: no-repeat;
            background-size: cover 
               }
               
    .parentbox {
            position: relative;
            margin: 0 auto;
            width:800px;
            height: 500px;
            text-align: center
               }
               
    .childbox {
            position: absolute;
            padding: 10px;
            width: 400px;
            height: auto;
            border: solid 5px #fff;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
               }
               
    h1 {
             display: inline-block;
             text-align: left;
             color: #fff
               }