質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1179閲覧

Webページ 画像の上下センター

ryohasegawa

総合スコア437

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/06 12:44

編集2017/05/06 14:08

イメージ説明
画像のようなヘッダーで、アイコンの画像は上下センターにできたんですが、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}

プレビュー
イメージ説明
画像の位置が大きくずれます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.icon は幅高さを指定され、また画像に直接指定されているからでは。

また、「ロゴ」の英語は「logo」だと思いますよ。

【ロゴタイプ - Wikipedia】
https://ja.wikipedia.org/wiki/%E3%83%AD%E3%82%B4%E3%82%BF%E3%82%A4%E3%83%97


追記:

親要素に高さがないから。

HTML

1<li id="rogo_space"><a href=""><img class="rogo" src="https://placehold.jp/8/cc9999/993333/150x30.png" alt="ロゴ"></a></li>

CSS

1#rogo_space { 2 height: 40px; 3} 4```**動くサンプル:**[https://jsfiddle.net/py4fy4a9/](https://jsfiddle.net/py4fy4a9/)

投稿2017/05/06 12:55

編集2017/05/06 14:19
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryohasegawa

2017/05/06 13:04

画像に直接指定されている とはどういう意味でしょう?
kei344

2017/05/06 13:45

<img src="./image/rogo.png" alt="ロゴ"> クラスがある↓↑クラスがない <img class="icon" src="php_module/read_icon.php?id=<?= h($app->me()->id) ?>"/>
ryohasegawa

2017/05/06 13:52

その前のaタグの方についているのじゃダメですか?
kei344

2017/05/06 13:56

とりあえず高さと幅を指定してみてください。
ryohasegawa

2017/05/06 14:00

指定してもうまくいかないんです。その状況を追記しますね
ryohasegawa

2017/05/06 14:28

ありがとうございます。 解決はしました。 でも、iconの方は高さ指定してないですよ。 headerに指定してある高さを認識するはずなんですが・・・
kei344

2017/05/06 14:33

> headerに指定してある高さを認識するはずなんですが #rogo_space に position: relative; を指定しているのにそこが高さ0だからですよ?
ryohasegawa

2017/05/06 14:36

それなら、userpaneleで position: relative;をして、高さを40pxにしていなのにアイコンは中央になぜなったのですか?
kei344

2017/05/06 14:42

#userpanele がインラインだから高さを持たず、祖先にさかのぼったからかなぁ。とりあえず設計するときに高さを持たない要素を積み重ねると、動きが想定しにくいので丁寧に作ったほうがいいですよ。
ryohasegawa

2017/05/06 14:47

ってことは、再現不可能なバグが発生しているということでしょうか?
kei344

2017/05/06 14:50

作り方が悪いだけですよ。
ryohasegawa

2017/05/06 14:54

なるほど、でも解決できてよかったです。 もう少し作り直します。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問