Align image and text box in middle

HTML

<div>
    <img class="image" src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png"> 
    <span class="text">Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A Block_A </span>
    </div>

CSS

.image {
    width:10%;
    height:10%;
    vertical-align: middle;
}
.text {
    vertical-align: middle;
    display:inline-block;
    width: 50%;
    overflow: visible;
    background-color: #FDF990;
    padding: 15px 20px 10px;
    font-size: 1.2em;
    color: #454545;
    -webkit-box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    -moz-box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    box-shadow: 10px 10px 31px -9px rgba(204, 226, 242, 1);
    border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border: 0px solid #000000;
}