投稿日：2014年12月10日｜最終更新日: 2021年3月6日

ボックスの縦横中央に文字を配置するには？

HTML・CSS WEB全般レスポンシブデザイン

　同じ高さのボックスを３つ並べます。その上下左右の中央に文字を並べます。

完成イメージ
コード
desktop.cssが存在しない場合、IE7以下ではどうなるか？
次回

完成イメージ

Ie9以降のブラウザです。黄色のボックス中央に文字を配置します。

↓

スマートフォンサイズの画面です。画面が縮むと、ボックスが縦一列になります。文字の位置がやはりボックスの中央です。

↓

Ie8～6のブラウザです。黄色のボックス中央に配置された文字が同じ位置です。

コード

index.html

htmlを記述します。

htmlタグ

・コンディショナル・コメントで、htmlタグのclass属性を分岐します。
[if lt IE 7]　IE7未満　：no-js、lt-ie9、lt-ie8、lt-ie7のクラス名を使用。
[if IE 7]　IE7の場合　：no-js、lt-ie9、lt-ie8のクラス名を使用。
[if IE 8]　IE8の場合　：no-js、lt-ie9のクラス名を使用。
[if gt IE 8]　IE8より大きい場合　：no-jsのクラス名を使用。

スタイルシート

・ブラウザのバージョンごと、使用するcssファイルを分けます。
[if (gt IE 8) | (IEMobile 7)]　IE8より大きい場合か、モバイルの場合：「style.css」を使用。
[if (gt IE 8) | (IEMobile 7)]　ie6～ie8の場合：「desktop.css」を使用。
※前回の記事に詳細が記載しております。
→IE8以下でメディアクエリを対応させるには？

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
<head>
<!-- モバイル・ファーストで定義した IE6-8 以外のブラウザ用 -->
<!--[if (gt IE 8) | (IEMobile 7)]><!-->
<link href="style.css" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!-- IE6-8 向けのデスクトップ用 -->
<!--[if (lt IE 9) & (!IEMobile 7)]><!-->
<link href="/css/desktop.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="row">
  <div class="four cols">
    <div class="parent-box">
      <div class="child-box">
        <span>
          <h1>タイトル1</h1>
          <p>ボックスの上下左右の中央にテキストを配置</p>
        </span>
      </div>
    </div>
  </div>
  <div class="four cols">
    <div class="parent-box">
      <div class="child-box">
        <span>
          <h1>タイトル2</h1>
          <p>ボックスの上下左右の中央にテキストを配置</p>
        </span>
      </div>
    </div>
  </div>
  <div class="four cols">
    <div class="parent-box">
      <div class="child-box">
        <span>
          <h1>タイトル3</h1>
          <p>ボックスの上下左右の中央にテキストを配置</p>
        </span>
      </div>
    </div>
  </div>
</div>
</body>
</html>

style.css

　ie８よりバージョンが上のブラウザのcssを記述します。
index.htmlのとおり、divタグの親子関係はrow　→　cols、four　→　parent-box　→　child-box　→　child-boxです。

row

rowは、幅を100%にします。

colsとfour

黄色いボックスの型です。
「float:left;」を指定してボックスを回り込ませ、横一列にします。
「width: 33.333333%」を指定します。

parent-box

黄色いボックス本体です。
「border: 0.3em solid #fff;」で、白い線を作ります。
「width: 100%」を指定し、背景色を「background: #ffe600;」にします。
「display: table」でtable要素のような表示にします。

child-box

parent-boxの内側のボックスです。
「display: table-cell」でtd要素のような表示にします。ie8以降使用可能です。

child-box h1

赤い背景のタイトルを作ります。
「margin: 0 auto;」で、左右のマージンを指定します。autoで、左右中央に要素を配置します。ie6では使用できません。
「padding: 0.3em;」で、上下左右のパディングを指定します。
「border-radius: 0.5em;」で角を丸くします。css3なので、ieでは9以上から対応しています。

child-box p

「margin: 0.8em 0;」で、上下のマージンを指定します。
「padding: 0 1em;」で、左右のパディングを指定します。

@media screen

画面の幅が狭くなったとき、ボックスを縦一列にするためメディアクエリを指定します。
ブラウザの横幅が35em（560px）以下のときに適用されます。
「cols」のfloatをleftからnone、幅をautoにします。
「parent-box」の高さを200pxから140pxにします。

/*===============================================
● ボックスの縦横方向の中央にテキストを配置する
===============================================*/
.row {
	width: 100%;
	overflow: hidden;
	text-align: center;
}

.cols {
	float: left;
}

.four {
	width: 33.333333%;
}
 
/* ボックス向けスタイル */
.parent-box {
	border: 0.3em solid #fff;
	height: 200px;
	width: 100%;
	background: #ffe600;
	display: table;
}

.child-box {
	display: table-cell;
	width: 100%;
	vertical-align: middle;
	text-align: center;
}

.child-box h1 {
	font-size: 0.9em;
	color: #fff;
	background: red;
	margin: 0 auto;
	padding: 0.3em;
	width: 50%;
	border-radius: 0.5em;
}

.child-box p {
	margin: 0.8em 0;
	padding: 0 1em;
}

/* メディアクエリ */
@media screen and (max-width:35em) {
	.cols { float: none; width: auto; }
	.parent-box { height: 140px; }
}

desktop.css

ie6～ie8のときのcssを定義します。

lt-ie8 .child-box

IE 6, 7では「display:table-cell;」が効きません。そのための対策をします。
style.cssの「child-box」は継承します。
「position: relative;」で、親ボックス「parent-box」の相対位置として配置します。
「top: 50%;」で、parent-boxの上から50%の位置に配置します。

lt-ie8 .child-box span

h1要素やp要素を囲うspanタグを定義します。
「position: relative;」で、親ボックス「child-box」の相対位置として配置します。
「top: -50%;」で、「child-box」の-50%の高さに配置します。相対位置なので、「child-box」の一番上が基準位置です。

.lt-ie8 .four

parent-boxの親ボックス「four」の幅を31%にします。

@charset "utf-8";

/* IE7向け */
.lt-ie8 .child-box {
	position: relative;
	top: 50%;
}

.lt-ie8 .child-box span {
	position: relative;
	top: -50%;
}

.lt-ie8 .four {
	width: 31%;
}