40063


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

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

（上：divで囲んだもの、下: imgだけのもの）

[![画像の説明をここに入力](https://i.stack.imgur.com/RV3rI.jpg)](https://i.stack.imgur.com/RV3rI.jpg)

[html]

[code]

    <!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>
    
[/code]

[CSS]

[code]

    @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;
    }
    
[/code]

* * *

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

[![画像の説明をここに入力](https://i.stack.imgur.com/6IEIi.png)](https://i.stack.imgur.com/6IEIi.png)

[html]

[code]

    <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>
    
[/code]

[css]

[code]

    .container_1 span{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding: 30px 0;
        width: 200px;
    }
    
[/code]


CC BY-SA 3.0
2017-12-05T11:37:34.547
40057
2019-12-13T19:34:02.153
2017-12-05T13:44:25.960
12297
12297
question
css
img要素にdisplay:table-cellをしても効かない。（縦に配置されてしまう）


Edit1:

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

[code]

    @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;
    }
[/code]

[code]

    <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>
[/code]

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

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

[https://stackoverflow.com/questions/1977768/img-with-display-table-cell-is-
it-a-bug?noredirect=1&lq=1](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/>

[code]

    @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;
    }
[/code]

[code]

    <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>
[/code]

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

>
[code]

>     table {
>        table-layout: fixed;
>     }
>  
[/code]

[code]

    * {
      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;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2017-12-05T13:05:43.537
40063
2019-12-13T19:34:02.153
2019-12-13T19:34:02.153
32986
25766
40057
answer