Align vertically to center footer items

Question

I’m trying to align vertically to the center, items of my footer, only by the image occupy a height bigger gets misaligned, how to solve?

<footer class="panel-group panel-footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <p class="text-muted text-center"><b>Entre em contato:</b><br />(99) 99999-9999</p>
            </div>
            <div class="col-md-4">
                <p class="text-muted text-center"><b>Endereço:</b> <br /> Rua tal , 123<br /> Bairro - Cidade - Estado</p>
            </div>
            <div class="text-muted text-center col-md-4">
                <img height="120" src="~/Styles/logo-rodape.jpg" alt="logo" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted text-center copyright">© Todos os direitos reservados.</p>
            </div>
        </div>
    </div>
</footer>

Answer 1

You can resolve the issue by declaring a height for the first row columns of your footer and then with a little CSS and property help transform, align the paragraphs vertically:

.panel-footer .cell{
  height:120px;                 /* mesma altura da imagem */
}
.panel-footer p{
  position: relative;           /* relativo para não sair do seu local com a próxima declaração */
  top: 50%;                     /* empurrar para iniciar ao meio do seu contentor */
  transform: translateY(-50%);  /* puxar a distancia equivalente a metade da sua altura */
}

Example

.panel-footer .cell{
  height:120px;
}
.panel-footer p{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="panel-group panel-footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-4 cell">
                    <p class="text-muted text-center"><b>Entre em contato:</b><br />(99) 99999-9999</p>
                </div>
                <div class="col-xs-4 cell">
                    <p class="text-muted text-center"><b>Endereço:</b> <br /> Rua tal , 123<br /> Bairro - Cidade - Estado</p>
                </div>
                <div class="text-muted text-center col-xs-4 cell">
                    <img height="120" src="~/Styles/logo-rodape.jpg" alt="logo" />
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <p class="text-muted text-center copyright">© Todos os direitos reservados.</p>
                </div>
            </div>
        </div>
    </footer>

Answer 2

Use display: table-cell and vertical-align: middle