html - 左側の画像と右側のテキストを縦に並べる方法

Question

CSS

.container{
   height: 250px;
   padding 10px 0;
}
.col-left{
   display: inline-block;
   background-image:url("support.png");
   height:235px; 
   width:300px;
}

.col-right{
   display: inline-block;
   width:600px;
}

html

<div class="container">
    <div class="col-left"></div>
    <div class="col-right">
       <h1>this is my title</h1>
       <p>to reach their Potential</p>
    </div>
</div>

質問：

左側に画像、右側にテキストが必要です

1. 同じ行に表示します。

2. 縦に並べる (テキストは img の中間位置に表示される) どうすればこれを行うことができますか?

Answer 1

HTML コードは同じで、CSS は次のとおりです。

.container {
    position: relative;
    height: 235px;
    padding 10px 0;
}
.col-left {
    position: absolute;
    background: #AAA;
    height:235px;
    width:300px;
}
.col-right {
    display: table-cell;
    vertical-align: middle;
    height: 235px;
    padding-left: 310px;
}

デモ: http://jsfiddle.net/zWNCP/2/