画像のようなヘッダーで、アイコンの画像は上下センターにできたんですが、alphaという画像はセンターにできません。
php
1<header> 2 <div class="container"> 3 <div id="header_left"> 4 <ul> 5 <li><i class="fa fa-bars header-tab-menu" aria-hidden="true"></i></li> 6 <li id="rogo_space"><a class="rogo" href="<?= h(SITE_URL) ?>"><img src="./image/rogo.png" alt="ロゴ"></a></li> 7 </ul> 8 </div> 9 <div id="header_right"> 10 <ul> 11 <li class="alt"> 12 <a id="notification"><i class="fa fa-bell-o" aria-hidden="true"></i></a> 13 <ul class="dropdown-menu"></ul> 14 </li> 15 <li class="alt"> 16 <a id="userpanele"> 17 <div class="left"> 18 <img class="icon" src="php_module/read_icon.php?id=<?= h($app->me()->id) ?>"/> 19 </div> 20 <?= h($app->put_username()); ?><b class="caret"></b> 21 </a> 22 </li> 23 </ul> 24 </div> 25 </div> 26</header>
css
1header{ 2 position:fixed; 3 background: rgba(70,75,87,1); 4 border-bottom: 1px solid rgba(0,0,0,0.15); 5 top: 0; 6 left: 0; 7 width: 100%; 8 height: 40px; 9 color: #fff; 10 font-size: 1.3em; 11 line-height: 40px; 12} 13#header_right{ 14 float:right; 15} 16#header_left{ 17 float: left; 18} 19#userpanele{ 20 padding-left: 35px; 21 padding-right: 19px; 22 position: relative; 23} 24#rogo_space{ 25 position: relative; 26} 27.icon{ 28 width: 30px; 29 height: 30px; 30 31 position: absolute; 32 top: 0; 33 right: 0; 34 bottom: 0; 35 left: 0; 36 margin: auto 0; 37} 38.rogo{ 39 position: absolute; 40 top: 0; 41 right: 0; 42 bottom: 0; 43 left: 0; 44 margin: auto 0; 45}
アイコンはきちんと中央に表示されていて、それと同じようにalphaという画像にもおなじようにしてあるはずなんですが上手くできません。
###追記
変更点1
class="rogo"
の位置を変更しました。
php
1<li id="rogo_space"><a href="<?= h(SITE_URL) ?>"><img class="rogo" src="./image/rogo.png" alt="ロゴ"></a></li>
変更点2
CSSで高さと横幅を指定しました。
css
1.rogo{ 2 width: 100px; 3 height: 30px; 4 5 position: absolute; 6 top: 0; 7 right: 0; 8 bottom: 0; 9 left: 0; 10 margin: auto 0; 11}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/06 13:04
2017/05/06 13:45
2017/05/06 13:52
2017/05/06 13:56
2017/05/06 14:00
2017/05/06 14:28
2017/05/06 14:33
2017/05/06 14:36
2017/05/06 14:42
2017/05/06 14:47
2017/05/06 14:50
2017/05/06 14:54