Centralize Vertically

Navigation
1

I have a div and inside 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><divclass="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><divclass="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><divclass="texto_teste">
                        <span>Coloque ao vivo qualquer pessoa da audiência.</span>                    
                    </div>
                </div>
            </div>

The image below shows how I want it to stay.

Relate the item

    
asked by anonymous 21.09.2017 / 17:16

3 answers

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><divclass="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><divclass="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><divclass="texto_teste">
                        <span>Coloque ao vivo qualquer pessoa da audiência.</span>                    
                    </div>
                </div>
            </div>

Complete Flexbox Guide

    
21.09.2017 / 18:14
0

You get this effect using table , I do not know if this fits in with what you're developing, but it works the way you want it to be: 

<table>
  <tr>
   <td valign="center">
     <img src="../url/da_imagem.png">  
   </td>
   <td>SEU TEXTO AQUI</td>
 </tr>
</table>
    
21.09.2017 / 17:44
0

Good afternoon. According to your CSS, one very simple thing that can help is to set the height (height) defined in Pixels. So, it would have a 'limit' for the div, so do not encavalem. The change is quite simple, in your code, it would look like this: 

.line_teste {
width: 80%;
height: 50px;
margin: 5% 10%;
}
    
21.09.2017 / 18:42
Form with automatic save Options from select to closest