CSSリセットにすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下中央に配置できない。

でCSSリセットをすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下左右中央に配置できません。

またCSSリセットのせいか、display:flex;のせいか分かりませんが、div要素内のpaddingのどこかをautoの設定にすると、paddingが突然効かなくなります。
これは仕様でしょうか？
以下はコードです。
CSS

*{
margin:0;
padding:0;
}
#yoko{
display:-webkit-flex;
display:flex;
border:solid 1px #CCC;
padding:20px 10px 20px auto;
}

HTML

<div id="yoko">
<div>
testtesttest
</div>
<div>
<img src="images/hoge.jpg" alt="test" />
</div>
</div>

vertical-alignの問題
CSS

*{
margin:0;
padding:0;
}
#wapper{
width:900px;
margin:20px auto;
}
#header{
margin:20px auto;
padding:15px 20px;
border:solid 1px #CCC;
}
h1{
color:green;
font-size:58px;
}
#contents{
border:solid 1px #CCC;
padding:10px;
overflow:auto;
}
#left{
float:left;
width:45%;
}
#manner{
margin:0px 10px 20px 10px; 
border:double 5px blue;
overflow:auto;
padding:5px;
}
#manner div{
float:left;
width:70%;
}
#manner img{
float:right;
width:25%;
height:auto;
margin-top:5px;
}
#syacho3{
margin:auto 10px 20px 10px;
border:solid 1px blue;
overflow:auto;
padding:5px;	
}
#syacho3 img{
float:left;
width:25%;
height:auto;
margin-top:5px;
}
#syacho3 div{
float:right;
width:70%;
}
#rina3{
margin:auto 10px 20px 10px; 
border:solid 1px blue;
overflow:auto;
padding:5px;
}
#rina3 div{
float:left;
width:70%;
}
#rina3 img{
float:right;
width:25%;
height:auto;
margin-top:5px;
}
#syacho4{
margin:auto 10px 20px 10px;
border:solid 1px blue;
overflow:auto;
padding:5px;	
}
#syacho4 img{
float:left;
width:25%;
height:auto;
margin-top:5px;
}
#syacho4 div{
float:right;
width:70%;
}
#right{
float:right;
width:45%;
}
#keigo{
overflow:auto;
}
#keigo img{
display:block;
margin:auto;
height:420px;
}
#sodan{
border:solid 1px blue;
overflow:auto;
margin:20px auto auto auto;
padding:5px;
}
#sodan div{
float:left;
width:70%;
}
#sodan img{
float:right;
width:25%;
height:auto;
margin-top:5px;
}
#footer{
clear:both;
display:inline;
vertical-align:middle;
border:solid 1px #CCC;
text-align:center;
margin-top:20px;
}

HTML

<!DOCTYPE html>
<html>
<head>
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="wapper">
<div id="header">
<h1>test</h1>
<p>testは、～です。</p>
</div>
<!--header_end-->
<div id="contents">
<div id="left">
<div id="manner">
<div>
<p>
あかさたなは2まやらわ1あかさたなはまやわあかさたなはまやらわあかさたなはまや
わあかさたなはまやらわ
</p>
</div>
<img src="images/lake1web.jpg" alt="見本" />
</div>
<!--manner_end-->
<div id="syacho3">
<img src="images/lake1web.jpg" alt="見本" />
<div>
あかさたなはまやらわ
</div>
</div>
<!--syacho3_end-->
<div id="rina3">
<div>
あかさたなはまやらわ
</div>
<img src="images/lake1web.jpg" alt="見本" />
</div>
<!--rina3_end-->
<div id="syacho4">
<img src="images/lake1web.jpg" alt="見本" />
<div>
あかさたなはまやらわ
</div>
</div>
<!--syacho4_end-->
</div>
<!--left_end-->
<div="right">
<div id="keigo">
<img src="images/lake1web.jpg" alt="見本" />
</div>
<!--keigo_end-->
<div id="sodan">
<div>
あかさたなはまやらわ
</div>
<img src="images/lake1web.jpg" alt="見本" />
</div>
<!--sodan-->
</div>
<!--right_end-->
<div id="footer">
株式会社トラスト
</div>
<!--footer_end-->
</div>
<!--contents_end-->
</div>
<!--wapper_end-->
</body>
</html>