在引导程序中如何垂直对齐？答案

【问题标题】：How vertically align in bootstrap?在引导程序中如何垂直对齐？
【发布时间】：2015-10-27 14:11:18
【问题描述】：

我尝试垂直对齐一行文本，但没有效果。

<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;
}

我也尝试了一些我在谷歌搜索时发现的方法，但它们都不起作用。

我试过了： vertical-align with Bootstrap 3 How to use vertical align in bootstrap

【问题讨论】：

你能告诉我们你的代码吗？
Vertically Center in Twitter Bootstrap的可能重复

标签： html css twitter-bootstrap frameworks

【解决方案1】：

你能给我们举一个你尝试过的例子吗？

这适用于大多数事情

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

【讨论】：

【解决方案2】：

一般来说，要使用 CSS 垂直对齐文本，你必须创建一个容器，然后你可以使用 vertical-align: middle 来对齐你的文本

CSS：

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

HTML：

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

【讨论】：

【解决方案3】：

另一种方法是让你的父 div 是相对的，而子对象是绝对的。然后只需为您的子对象 CSS 设置顶部：50%，并转换：translateY(-50%)。

【讨论】：