[CSS]もっとも簡単なテキストや画像等の縦横中央配置

css, WEB制作

ページレイアウトをする時にちょくちょく躓きそうな、要素の縦横中央配置のcss Tipsです。
IE7含むIE7以下では動作しませんが、化石ブラウザ使っている人はほぼ淘汰されてきているので、この方法でも大丈夫でしょう。

スポンサーリンク

サンプルとサンプルコード

div要素の中に要素というシンプルな形の例です。
中央寄せしたい要素を囲っているdivに対し【display:table】を指定し、中の要素に【display:table-cell】を指定します。

段落テキスト縦横中央

Vertical and horizontal center

段落テキスト中央寄せ

<div class="sample_box_1">
    <p>段落テキスト縦横中央</p>
</div>

<div class="sample_box_1">
    <div>
        <h4>Vertical and horizontal center</h4>
        <p>段落テキスト中央寄せ</p>
    </div>
</div>
.sample_box_1{
    width: 300px;
    height: 150px;
    background: #ddd;
    display:table;
    text-align: center;
    margin:10px;
}

.sample_box_1 h4,.sample_box_1 p{
	padding:0;
	margin:0;
	border:none;
	background:none;
	font-size:18px;
}


.sample_box_1 > *{
    display:table-cell;
    vertical-align: middle;
}

応用例

このTipsを使ってこんな感じのレイアウトが組めます。
遊び心でtransitionやtransform等を入れています。

タイトル

概要テキスト-リンク先の概要説明などを書いたりなんだりかんだり
facebookのシェアみたいなレイアウトですね。

HTML部分は以下のようにシンプルな感じ。
画像を左側に配置し、右に概要テキストを表示する、リンクを紹介する時とかに使えそうなレイアウト。

<div class="sample_wrap">
	<div class="tumbnal_box">
		<a href="http://11neko.com/" taget="_blank"><img src="http://dummyimage.com/120x80/000/fff"></a>
	</div>
	<div class="text_box">
		<a href="http://11neko.com/" taget="_blank">タイトル</a>
		<p>概要テキスト-リンク先の概要説明などを書いたりなんだりかんだり<br>
			facebookのシェアみたいなレイアウトですね。</p>
	</div>
</div>

cssのポイントは、display:tableで組んでいる為、中の要素同士のmarginはborder-spacing: 10px 0;で行っています。

border-spacingのショートな書き方は通常のpaddingやmarginと違います。
padding:上下 左右;となりますがborder-spacingは左右 上下の順になります。

.sample_wrap{
	display:table;
	border:1px solid #999;
	padding:10px 0;
	border-collapse: separate;
	border-spacing: 10px 0;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.sample_wrap:hover{
	background:#dedede;
}

.tumbnal_box,.text_box{
	display:table-cell;
    vertical-align: middle;
}

.tumbnal_box img{
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.tumbnal_box img:hover{
	-webkit-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	transform: rotate(20deg);
}

.text_box p{
	font-size:14px;
}

この記事が気に入ったら
『いいね』しよう!