日: 2016年4月8日

<script src="<?php echo get_stylesheet_directory_uri(); //flexbox?>/d/js/flexibility.js"></script>

.container {
-js-display: flex;
display: flex;
align-contents: stretch;
}

具体

.before_after_box{
	-js-display: flex;
	 display: flex;

http://www.webcreatorbox.com/tech/ie8-flexbox/
http://www.webcreatorbox.com/tech/flexbox/
http://cosao.net/archives/8246

細かいのはソースを見てくれハウジング

ポイントは

画像は背景に設定

（ここは

align-items: center;

でいけたかも

あとは
画像を中心にしておおきくするにはなんとなくありだけど

文字がでかくなりすぎるので
小さくしなきゃいかんが

それじゃちいさすぎるで

もじだけうえからpngで重ねた

そんでmax-widhを設定してそれ以上おおきくせず

中心アプソルトで
ひだり3%でOK

/*追記文字　大きくなり過ぎないように*/
.sl_moji{max-width:1000px;
 position:absolute;
 top: 0;
	left: 3%;
	
	bottom:0;
	margin: auto;}
	/*ここだけ*/

<div class="viewer">
<ul>

<li class="sl3">

<!--*追記文字　大きくなり過ぎないように*-->
<img src="<?php echo get_stylesheet_directory_uri(); ?>/d/img/top-test4.png"    alt="エクステリア工事<?php include(get_stylesheet_directory() . "/d/word/5_shop_name.php") ?>｜スライド画像１" class="sl_moji"/>
<!---->

<img src="<?php echo get_stylesheet_directory_uri(); ?>/d/img/sl_0.png"    alt="エクステリア工事<?php include(get_stylesheet_directory() . "/d/word/5_shop_name.php") ?>｜スライド画像１" class="respo_img" />

</li>