html - how to make the img at the left side and the texts at the right side vertically line up -

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 title</h1>        <p>to reach potential</p>     </div> </div> 

question:

i want img @ left , texts @ right

1. to show on same line.

2. vertically line up(texts appear in middle position of img) how this?

i guess want. live demo

.container {     height: 250px;     padding 10px 0; } .col-left {     display: inline-block;     background-image:url("http://www.lois-systems.co.uk/wp-content/uploads/2012/08/support.png");     height:235px;     width:300px;     vertical-align:middle; } .col-right {     display: inline-block;     width:600px;     vertical-align:middle; } .col-right h1, .col-right p {     margin:0; }