Center Vertically

Question

I have a div and within it I have 2 more, one for an image and one for a text.  I need the image to always be centered vertically, regardless of the size of the text. 

.lista_teste{
    width: 100%;
    height: 100%;
    background: #ccc;
    float: left;
}

.line_teste {
    width: 80%;
    height: 100%;
    margin: 5% 10%;
}

.check_teste{
    width: 10%;
    float: left;
}

.texto_teste {
    width: 85%;
    float: right;
}

<div class="lista_teste">
                <div class="line_teste">
                    <div class="check_teste">
                        <img src="http://manoapp.com.br/images/bullet_blue.png"></img>
                    </div>
                    <div class="texto_teste">
                        <span>Deixe rodando uma série dos seus próprios conteúdos ligados numa playlist sem gastar sua banda de internet nem infra-estrutura de informática.</span>                    
                    </div>
                </div>
                <div class="clear"></div>
                <div class="line_teste">
                    <div class="check_teste">
                        <img src="http://manoapp.com.br/images/bullet_blue.png"></img>
                    </div>
                    <div class="texto_teste">
                        <span>Transmita ao vivo do seu celular ou de um desktop.</span>                    
                    </div>
                </div>
                <div class="clear"></div>
                <div class="line_teste">
                    <div class="check_teste">
                        <img src="http://manoapp.com.br/images/bullet_blue.png"></img>
                    </div>
                    <div class="texto_teste">
                        <span>Coloque ao vivo qualquer pessoa da audiência.</span>                    
                    </div>
                </div>
            </div>

The image below shows how I want it to look. 

Relate the item

Answer 1

Use flexbox

.line_teste {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height:100px;
}
.check_teste {
  padding: 20px;
}

<div class="lista_teste">
                <div class="line_teste">
                    <div class="check_teste">
                        <img src="http://manoapp.com.br/images/bullet_blue.png">
                    </div>
                    <div class="texto_teste">
                        <span>Deixe rodando uma série dos seus próprios conteúdos ligados numa playlist sem gastar sua banda de internet nem infra-estrutura de informática.</span>                    
                    </div>
                </div>
                <div class="clear"></div>
                <div class="line_teste">
                    <div class="check_teste">
                        <img src="http://manoapp.com.br/images/bullet_blue.png">
                    </div>
                    <div class="texto_teste">
                        <span>Transmita ao vivo do seu celular ou de um desktop.</span>                    
                    </div>
                </div>
                <div class="clear"></div>
                <div class="line_teste">
                    <div class="check_teste">
                        <img src="http://manoapp.com.br/images/bullet_blue.png">
                    </div>
                    <div class="texto_teste">
                        <span>Coloque ao vivo qualquer pessoa da audiência.</span>                    
                    </div>
                </div>
            </div>

Complete flexbox guide

Answer 2

You get this effect by using table, I don’t know if this fits what you’re developing, but it works like you’re wanting it:

<table>
  <tr>
   <td valign="center">
     <img src="../url/da_imagem.png">  
   </td>
   <td>SEU TEXTO AQUI</td>
 </tr>
</table>

Answer 3

Good afternoon. According to your CSS, one simple thing that can help is to put the height (height) set in Pixels. Thus, it would have a 'limit' for the div, making them not fit. The change is very simple, in your code, would be like this:

.line_teste {
width: 80%;
height: 50px;
margin: 5% 10%;
}