アットウィキロゴ
nicepaper @ ウィキ
アットウィキロゴ
nicepaper @ ウィキ
ページ一覧

前回記事CSSで文字やテキストを上下中央の中心揃えにする方法が効かない場合があります。それは float:leftやfloat:rightをしたときです。 今回は右ボックス、左ボックスがあった際にどのように上下中央揃えするかを考えていきたいと思います。6月21日記事

イメージ



目次




注意書き

text-align:center;の解説は省略いたします。ただ単に中央揃えするだけのプロパティです。影響はしません。

こんな場合はできる

floatを使わず、vertical-align:middle;とdisplay:table-cellを入れると確かに上下中央はできます。
HTML部 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>上下中央揃え</title>
</head>
<body>
<div id="wrapper">
	<div id="left">
	<p>左側をfloatしないと
    <br>確かに上下中央できます。
    </p>
	</div>
    <div id="right">
    <p>こっちは<br>
    右側</p>
    </div>
</div>
</body>
</html>

CSS部 

@charset "utf-8";
/* CSS Document */


#wrapper{
	margin: 10px auto;
	padding:20px;
	width: 600px;
	height:200px;
	border: 1px solid #000;
}
#left{
	width: 300px;
	height:200px;
	background: #FEE;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
#left p{
	color:#f00;
}
#right{
	width:300px;
	height:200px;
	background: #EFE;	
}
#right p{
	color:#0f0;
}

こんな感じです。



floatを入れるとできない。

しかし、floatを入れるとvertical-align:middle;とdisplay:table-cellを入れても上下中央にできません。
HTML部 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>上下中央揃え</title>
</head>
<body>
<div id="wrapper">
	<div id="left">
	<p>float:leftを入れると
    <br>上下中央が効きません。
    </p>
	</div>
    <div id="right">
    <p>こっちは<br>
    右側</p>
    </div>
</div>
</body>
</html>

CSS部 

@charset "utf-8";
/* CSS Document */


#wrapper{
	margin: 10px auto;
	padding:20px;
	width: 600px;
	height:200px;
	border: 1px solid #000;
}
#left{
	float:left;
	width: 300px;
	height:200px;
	background: #FEE;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
#left p{
	color:#f00;
}
#right{
	float:left;
	width:300px;
	height:200px;
	background: #EFE;
	
}
#right p{
	color:#0f0;
}

こんな感じになります。上下中央できなくなります。



対策

floatをはずし、両方にvertical-align:middle;とdisplay:table-cellを入れるとできます。
HTML部 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>上下中央揃え</title>
</head>
<body>
<div id="wrapper">
	<div id="left">
	<p>floatを入れずに
    <br>display:table-cell
    <br>とvertical-align:middle
    <br>を両方に入れると
    <br>直ります。</p>
	</div>
    <div id="right">
    <p>こっちは<br>
    右側</p>
    </div>
</div>
</body>
</html>

CSS部 

@charset "utf-8";
/* CSS Document */


#wrapper{
	margin: 10px auto;
	padding:20px;
	width: 600px;
	height:200px;
	border: 1px solid #000;
}
#left{
	width: 300px;
	height:200px;
	background: #FEE;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
#left p{
	color:#f00;
}
#right{
	width:300px;
	height:200px;
	background: #EFE;
	display:table-cell;
	vertical-align:middle;
	text-align:center;	
}
#right p{
	color:#0f0;
}

無事なおりました。



以上

「vertical-alignが効かないときの対策」をウィキ内検索
最終更新：2015年06月22日 13:13