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

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

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

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

HTML5

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

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

HTML

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

CSS

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

Q&A

解決済

2回答

5307閲覧

display:table-cell;を使うとAndroidで画像が表示されなくなりました

mx3

総合スコア175

CSS3

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

HTML5

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

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2015/03/19 03:31

Android4.0で画像にvertical-alignを適用させたくて、親要素にdisplay:table-cell;を適用したところ、画像が見事に表示されなくなってしまいました。iOS8は問題なく表示されます。

コードは下記のとおりです。

lang

1 2 <div class="box"> 3 <img src="sample.jpg"> 4 </div> 5

lang

1 2.box { 3 height: 50px; 4 display: table-cell; 5 vertical-align: bottom; 6} 7

他の要素に対する指定が影響している可能性もあると思うのですが、
原因として何か考えられるものはあるでしょうか?

よろしくお願いします!

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

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

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

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

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

guest

回答2

0

ベストアンサー

display:table;と画像に
幅と高さ指定が無いからかも知れません。

スマホからの投稿なのでサンプルソースを書くことが出来ませんが

.boxの親要素にdisplay:table; width:100%;
.box imgにdisplay:inline-block; width:100%;
とし、テストしてみて下さい。

投稿2015/03/19 06:10

編集2015/03/19 06:11
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

mx3

2015/03/19 07:55

回答ありがとうございます。 教えて頂いた内容で、無事に画像が表示されました! いろいろ試したところ、imgのinline-blockについては、設定しなくても表示されるようでした。imgのwidth100%は元々継承されていたので「.boxの親要素にdisplay:table; width:100%; 」という部分が必要だったようです。 なぜそうなるのかというところがイマイチ分からないので、勉強しないといけないですね。 ともかく、解決し助かりました、ありがとうございます!
guest

0

親要素に
display: table;
を指定してみてはどうですか。

投稿2015/03/19 04:29

Seiji_Ogawa

総合スコア112

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

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

mx3

2015/03/19 05:48

回答ありがとうございます。試してみましたがダメでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問