How vertically align in bootstrap?

Question

I try to vertically align a text in a row, but has no effect.

<div class="row direita">
    <div class="col-xs-2"></div>
    <div class="col-xs-4 description">
        <h4>Modelo</h4>
        <p>Y21512</p>
        <h4>Descrição</h4>
        <p>
            Vestido de Noiva ombro a ombro com transparência no colo e costas, detalhe
            de cinto em cristais, todo em renda francesa rebordada em pedrarias,
            corte sereia com cauda.
        </p>
        <h4>Tamanhos</h4>
        <p>02 – 28</p>
        <h4>Cores</h4>
        <p>Ivory, White</p>
        <h4>Preço</h4>
        <p>R$400.000,00</p>
        <hr />
        <button class="btn btn-default btn-primary center-block">Comprar</button>
    </div>
    <div class="col-xs-1"></div>
    <div class="col-xs-5">
        <div class="row">
            <div class="col-xs-1"></div>
            <div class="col-xs-11">
                <img src="img/Produtos Cappeli/Vestido07/Y21512.jpg" class="img-responsive pull-right" />
            </div>
        </div>
    </div>
</div>

.esquerda {
    display: inline-block;
}

.description {
    /*padding-top: 110px;*/
    display: inline-block;
    vertical-align: middle;
}

I also tried some methods that I found when I searched in Google, but none of them works.

I tried: vertical-align with Bootstrap 3 How to use vertical align in bootstrap

possible duplicate of [Vertically Center in Twitter Bootstrap](http://stackoverflow.com/questions/31808445/vertically-center-in-twitter-bootstrap) — BENARD Patrick, Aug 05 '15 at 07:13

score 0 · Answer 1 · answered Aug 05 '15 at 00:58

0

Can you give us an example of what you have tried?

This will work on most things

.parent {
    display:table;
}
.child {
    display:table-cell;
    vertical-align:middle;
}

answered Aug 05 '15 at 00:58

webbist

456
4
19

score 0 · Answer 2 · answered Aug 05 '15 at 01:01

In general, to vertically align text using CSS, you have to create a container and then you can use vertical-align: middle to align your text

CSS:

.container {
  display: inline-block;
}
span {
  display: inline-block;
  vertical-align: middle;
}

HTML:

<div class="container">
  <span>Vertically aligned text</span>
</div>

score 0 · Answer 3 · answered Aug 05 '15 at 02:58

0

Another method is to make your parent div relative, and child objects absolute. Then just set the top: 50%, and transform: translateY(-50%) for your child object CSS.

answered Aug 05 '15 at 02:58

mattg123

23
3

How vertically align in bootstrap?

3 Answers3