liのaのpの上下左右中央ぞろえができません。
<p>はなくてもかまいません まず、ソースから ```HTML <html> <head> <script> $(function() { $(window).on(`scroll`, function() { if ($(this).scrollTop() > 50) { $(`.header`).addClass(`fixed`); } else { $(`.header`).removeClass(`fixed`); } }); }); </script> </head> <body> <div id="fixbar"> <h1 id="top">XXX</h1> <!----------------ここの部分---------------------------------------> <ul class="top_menu"> <li><a href="xxx.html"><p>menu1</p></a></li> <li><a href="xxx.html"><p>menu2</p></a></li> <li><a href="xxx.html"><p>menu3</p></a></li> <li><a href="xxx.html"><p>menu4</p></a></li> </ul> <!-----------------ここまで------------------------------------> </div> </body> </html> ```そしてCSS
CSS
1* { 2 margin: 0; 3 padding: 0; 4} 5html,body { 6 margin: 0; 7 padding: 0; 8 width: 100%; 9 height: 100%; 10} 11h1 { 12 display: block; 13 font-size: 2em; 14 font-weight:bold; 15} 16a { 17 color: #000; 18 text-decoration: none; 19} 20body:after { 21 clear: both; 22} 23#fixbar { 24 z-index: 2; 25 top: 0px; 26 position: fixed; 27 background-color: #f0f0f0; 28 box-shadow: 0px 5px 1px 0px rgba(0,0,0,.2), 0px -1px 5px 1px rgba(255,255,255,1) inset; 29 width: 100%; 30 height: 30px; 31} 32#top { 33 text-align: center;<!--------インライン用--> 34 float:left; 35 height: auto; 36 width: 20%; 37} 38.top_menu { 39 width:80%; 40 float: right; 41} 42.top_menu:after { 43 clear: both; 44} 45.top_menu li { 46text-align:center; 47 width:25%; 48 height: 100%; 49 float: left; 50 box-shadow:0px 1px 0px 1px #000 inset; 51} 52.top_menu li a{ 53 width: 100%; 54 height: 100%; 55 margin: 0 auto; 56 float: left; 57} 58.top_menu li a:hover { 59 background-color: rgba(0,0,0,0.1); 60}
fixbarはページの上部に固定しています
text-alignを使っているので、左右中央揃えができているのですが、上下中央揃えができません。
display:table-cellとtext-alignとvertical-align:middleを使っても、できなかったです
長々とすみません
インライン要素やブロック要素等が色々混ざっているのが原因のような気がしますが、どうでしょうか?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。