「vertical-alignが効かないときの対策」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
前回記事[[CSSで文字やテキストを上下中央の中心揃えにする方法]]が効かない場合があります。それは&color(red){float:leftやfloat:rightをしたときです。}今回は右ボックス、左ボックスがあった際にどのように上下中央揃えするかを考えていきたいと思います。6月21日記事
~
~
イメージ
#image(width=500,f004.png)
~
~
目次
#contents
~
~
----
~
*注意書き
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;
}
こんな感じです。
#image(width=500,f001.png)
~
~
*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;
}
こんな感じになります。上下中央できなくなります。
#image(width=500,f002.png)
~
~
*対策
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;
}
無事なおりました。
#image(width=500,f004.png)
前回記事[[CSSで文字やテキストを上下中央の中心揃えにする方法]]が効かない場合があります。それは&color(red){float:leftやfloat:rightをしたときです。}今回は右ボックス、左ボックスがあった際にどのように上下中央揃えするかを考えていきたいと思います。6月21日記事
~
~
イメージ
#image(width=500,f004.png)
~
~
目次
#contents
~
~
----
~
*注意書き
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;
}
こんな感じです。
#image(width=500,f001.png)
~
~
*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;
}
こんな感じになります。上下中央できなくなります。
#image(width=500,f002.png)
~
~
*対策
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;
}
無事なおりました。
#image(width=500,f004.png)
~
~
以上
