1

Tenho uma div e dentro dela possuo mais 2, uma para uma imagem e outra para um texto. Eu preciso que a imagem fique sempre centralizada verticalmente, independente do tamanho do texto. 

.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>

A imagem abaixo mostra como eu quero que fique.  inserir a descrição da imagem aqui

Relacionar o item

3 Respostas 3

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>

Guia completo flexbox

2
0

Você consegue esse efeito utilizando table, não sei se isso se enquadra ao que você esta desenvolvendo, mais funciona como você está querendo:

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

0

Boa tarde. De acordo com seu CSS, uma coisa bem simples que pode ajudar é colocar a altura (height) definida em Pixels. Sendo assim, teria um 'limite' para a div, fazendo com que não encavalem. A alteração é bem simples, no seu código, ficaria assim:

.line_teste {
width: 80%;
height: 50px;
margin: 5% 10%;
}
1
  • Não posso por limite na div do texto, tenho que deixar automático. obrigada 21/09/2017 às 19:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .