Question

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

<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

Answer 1

您能举例说明您的尝试吗？

这适用于大多数事情

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

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

Answer 3

另一种方法是使父div相对，子对象为绝对。然后设置顶部：50％，并为您的子对象CSS转换：translateY（-50％）。

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

3 个答案: