Twitter Bootstrap 3, conteúdo centralizado verticalmente [duplicado]

Question

Esta pergunta já tem respostas aqui:

alinhamento vertical com Bootstrap 3 (23 respostas)

Fechado 5 anos atrás.

Eu sei que isso já foi perguntado milhares de vezes, mas não consigo encontrar uma maneira de centralizar o texto e a imagem verticalmente.

Estou usando o Twitter Bootstrap 3 com conteúdo dinâmico, portanto não sei o tamanho nem do texto nem da imagem.Além disso, quero que tudo seja responsivo.

Eu criei um inicialização que resumem o tipo de layout que estou tentando alcançar.Basicamente, quero que o texto e a imagem sejam centralizados verticalmente.O texto nem sempre é maior que a imagem.

Alguém pode me ajudar com isso, por favor?

Obrigado.

Answer 1

Você pode usar display:inline-block em vez de float e vertical-align:middle com este CSS:

.col-lg-4, .col-lg-8 {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

A demonstração http://bootply.com/94402

Answer 2

Opção 1 é usar display:table-cell.Você precisa desbloquear o Bootstrap col-* usando float:none..

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

http://bootply.com/94394

---

opção 2 é display:flex para alinhar verticalmente a linha com flexbox:

.row.center {
   display: flex;
   align-items: center;
}

http://www.bootply.com/7rAuLpMCwr

---

A centralização vertical é muito diferente em Inicialização 4.Veja esta resposta para Bootstrap 4 https://stackoverflow.com/a/41464397/171456