ホーム >  WEB全般 >  ボックスの縦横中央に文字を配置するには?


Posted:2014/12/10 9:00:31 AM|Category : WEB全般

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

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

完成イメージ

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

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

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

コード

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以下でメディアクエリを対応させるには?

<!--&#91;if lt IE 7&#93;>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <!&#91;endif&#93;-->
<!--&#91;if IE 7&#93;>         <html class="no-js lt-ie9 lt-ie8" lang="ja"> <!&#91;endif&#93;-->
<!--&#91;if IE 8&#93;>         <html class="no-js lt-ie9" lang="ja"> <!&#91;endif&#93;-->
<!--&#91;if gt IE 8&#93;><!--> <html class="no-js" lang="ja"> <!--<!&#91;endif&#93;-->
<head>
<!-- モバイル・ファーストで定義した IE6-8 以外のブラウザ用 -->
<!--&#91;if (gt IE 8) | (IEMobile 7)&#93;><!-->
<link href="style.css" rel="stylesheet" type="text/css" />
<!--<!&#91;endif&#93;-->
<!-- IE6-8 向けのデスクトップ用 -->
<!--&#91;if (lt IE 9) & (!IEMobile 7)&#93;><!-->
<link href="/css/desktop.css" rel="stylesheet" type="text/css" />
<!&#91;endif&#93;-->
</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

 ie8よりバージョンが上のブラウザの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%;
}

desktop.cssが存在しない場合、IE7以下ではどうなるか?

ie7以下では、「display: table;」と「display: table-cell;」が対応していません。
以下のように子ボックスが親ボックスの頂点に着いてしまいます。
less0015


トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告