Coding Architecture

CSS で上下中央揃えdemo

<div id="contents01">
<p class="image01">
<img src="img/img01.gif" alt="" width="100" height="100" />
</p>
<p class="text01">
testテストてすと
</p>
<p class="text02">
testテストてすとtestテストてすとtestテストてすとtestテストてすとtestテストてすと
</p>
</div>

img{
vertical-align:bottom;
}

#contents01{
width:530px;
padding:1px;
margin-bottom:10px;	
background-color:#e8ecef;
}

#contents01 p.image01 {
display: table-cell;
vertical-align: middle;
width:100px;
padding-right:10px;
/display: inline;
/zoom: 1;
background:#eebbcb;
}


#contents01 p.text01,
#contents01 p.text02{
display: table-cell;
width:200px;
padding-right:10px;
vertical-align: middle;
/display: inline;
/zoom: 1;
}
#contents01 p.text01{
background:#a0d8ef;

}
#contents01 p.text02{
background:#c3d825;

}