HTML5
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5<title>Title</title> 6 <meta charset="UTF-8"> 7 <meta name="description" content=""> 8 <meta name="keywords" content=""> 9 <script src=".js" type="text/javascript"></script> 10 <link href="style.css" rel="stylesheet" type="text/css" media="screen,print"> 11</head> 12<body> 13 14<div id="body"> 15 16 <div id="aka"> 17 <h1 class="middle">赤</h1> 18 </div> 19 20 <div id="ao"> 21 <h2 class="middle">青</h2> 22 </div> 23 24 <div id="midori"> 25 <h2 class="middle">緑</h2> 26 </div> 27 28 <div id="iro"> 29 <h2 class="middle">好きな色</h2> 30 </div> 31 32</div> 33 34</body> 35 36</html> 37
CSS
1#body{ 2 width: 1000px; 3 text-align: center; 4 margin-left:auto;margin-right:auto; 5 text-align:left; 6} 7 8#aka{ 9 width: 1000px; 10 height: 300px; 11 background-color: #ff0000; 12 text-align: center; 13 margin-left:auto;margin-right:auto; 14 display:table-cell; 15 vertical-align: middle; 16} 17 18#ao{ 19 width: 600px; 20 height: 500px; 21 background-color: #0000ff; 22 text-align: center; 23 margin-left:auto;margin-right:auto; 24 display:table-cell; 25 vertical-align: middle; 26 float:left 27} 28 29#midori{ 30 width: 400px; 31 height: 500px; 32 background-color: #008000; 33 text-align: center; 34 display:table-cell; 35 vertical-align: middle; 36 margin-left:auto;margin-right:auto; 37 float:right 38} 39 40#iro{ 41 width: 1000px; 42 height: 300px; 43 background-color: #00bfff; 44 text-align: center; 45 margin-left:auto;margin-right:auto; 46 display:table-cell; 47 vertical-align: middle; 48 clear: right; 49 clear: left; 50} 51 52.middle{ 53 54}
上記図のように「赤」「青」と書いてあるテキストを
上下左右の中央にCSSで、そろえようとしましたが、
CSS
1float
を入れると
CSS
1 display:table-cell; 2 vertical-align: middle;
を入力しても高さがうまく揃いません。
いろいろな方法があると思いますが、
どうすれば、よいでしょうか。
回答5件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/30 22:28