0

img要素にdisplay:table-cellをしても効かない(縦に配置されてしまう)のはなぜでしょうか?

imgをdivで囲むと効くのですが。

(上:divで囲んだもの、下: imgだけのもの)

画像の説明をここに入力

[html]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="container container_1">
            <div class="box"><img src="green.jpg" alt=""></div>
            <div class="box"><img src="cosmos.jpg" alt=""></div>
            <div class="box"><img src="flower.jpg" alt=""></div>
        </div>

<br>

        <div class="container container_2">
            <img src="green.jpg" alt="">
            <img src="cosmos.jpg" alt="">
            <img src="flower.jpg" alt="">
        </div>


    </body>
</html>

[CSS]

@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}


.container{
    width: 960px;
    margin: 0 auto;
    display: table;
    background: gray;
}


.box{
    margin: 100px auto;
    width: 33.33%;
    height: 250px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}


.container_1 img{
    width: 200px;
}

.container_2 img{
    width: 200px;
    display: table-cell;
    vertical-align: middle;
}

ちなみに、img要素と同じインライン要素であるspan要素だとうまくいきます。
img要素はwidthがテーブルセルのサイズに合わせて伸縮しないからなのでしょうか。

画像の説明をここに入力

[html]

<div class="container container_1">
            <span>テキスト</span>
            <span>テキスト</span>
            <span>テキスト</span>



            <!-- <div class="box"><img src="green.jpg" alt=""></div>
            <div class="box"><img src="cosmos.jpg" alt=""></div>
            <div class="box"><img src="flower.jpg" alt=""></div> -->
</div>

[css]

.container_1 span{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 30px 0;
    width: 200px;
}
2
  • 状況がよくわかりませんが、「divで囲むと効く」のであればブロック要素を想定しているということだと思います。参考:ブロックレベル要素とインライン要素
    – BLUEPIXY
    Commented 2017年12月5日 12:01
  • MDNのCSSリファレンスにあるdisplayの項目も参考になるかもしれません。containerクラスをdisplay: inline tableにしてみるとか、display: table-rowな要素を用意してみるといった解決のために試せそうなアイデアがいくつか思い浮かびました。 Commented 2017年12月5日 12:56

1 件の回答 1

0

Edit1:

オリジナルのコードでもこちらのfirefox上だとimgにdisplay:table-cell効いていました。web browserのバグの可能性があるそうです。オリジナルのコードのimgだけ変えたjsfiddleです。
https://jsfiddle.net/kimihiro/cddbckyp/

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  display: table;
  background: gray;
}

.box {
  margin: 100px auto;
  width: 33.33%;
  height: 250px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.container_1 img {
  width: 200px;
}

.container_2 img {
  width: 200px;
  display: table-cell;
  vertical-align: middle;
}
<div class="container container_1">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
</div>

<br>

<div class="container container_2">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
</div>

こちらのinternet explorerとgoogle chromeでも、imgは横ではなく縦に表示されます。とりあえず聞きたいこととあっていると思いますか?

バグの可能性についてstackoverflowより

https://stackoverflow.com/questions/1977768/img-with-display-table-cell-is-it-a-bug?noredirect=1&lq=1

Edit2:

https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level より img はinline-block要素(replaced inline elementとも呼ばれている)なのでheightもwidthも本当なら効くようですが、以上のリンクよりウェブ・ブラウザのバグの可能性もあるので、ご自身でお考えになっているspanでinline要素として、display: table-cellとするとchrome、internet explorer上でも作動しますね。

spanを使用したバージョン。
https://jsfiddle.net/kimihiro/x6hdobb5/

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  display: table;
  background: gray;
}

.box {
  margin: 100px auto;
  width: 100%;
  height: 250px;
  vertical-align: middle;
  text-align: center;
}

.container_1 img {
  width: 200px;
  vertical-align: middle;
}

.container_2 img {
  width: 200px;
  vertical-align: middle;
}

span {
  display: table-cell;
}
<div class="container container_1">
  <span><img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt=""></span>
</div>

<br>

<div class="container container_2">
  <span>
<img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
  <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  </span>
</div>

他のやり方としては、CSSのdisplayを消してCSSに次のcontainerとboxとcontainer_2 img内のtableを消して次のようにやる方法もあるそうです。

table {
   table-layout: fixed; 
}

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 960px;
  margin: 0 auto;
  background: gray;
}

.box {
  margin: 100px auto;
  width: 33.33%;
  height: 250px;
  vertical-align: middle;
  text-align: center;
}

.container_1 img {
  width: 200px;
}

.container_2 img {
  width: 200px;
  vertical-align: middle;
}

table {
  table-layout: fixed;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="container container_1">
    <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
    <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
    <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  </div>

  <br>

  <div class="container container_2">
    <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
    <img src="https://vignette.wikia.nocookie.net/powerlisting/images/6/6d/Cute-Dog-Wallpaper-dogs-13936376-1024-768.jpg/revision/latest?cb=20140103005600" alt="">
    <img src="https://www.homepage-tukurikata.com/image/lion.jpg" alt="">
  </div>

</body>

</html>

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。