@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は横ではなく縦に表示されます。とりあえず聞きたいこととあっていると思いますか?
@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;
}
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>