Question

我真的陷入了一个问题。我想在引导行div（id =“v-align”）中垂直对齐内容（每个元素应该垂直居中）。我已经尝试了不同的方法来解决这个问题，但是我还没有找到解决方案。这是我的代码：

<div class="slide" data-anchor="slide1">
    <div class="row">
        <div class="menu_top"></div>
    </div>

    <div class="row" id="v-align">
        <div class="col-md-3">
            <div class="col-sm-10">
                <img src="./public/images/crm.png" class="img-responsive">
            </div>
        </div>
        <div class="col-md-6 text-center">
            <img src="./public/images/photo1.jpg" class="img-responsive image">
        </div>
        <div class="col-md-3">
            <div class="col-sm-10">
                <img src="./public/images/crm.png" class="img-responsive">
           </div>
        </div>
    </div>

    <div class="row">   
        <div class="col-md-12 text-center">
            <h2>Some text here</h2>     
        </div>
    </div>
</div>

<style>
    .image {
       max-height: 500px;
       margin: 0 auto;
    }
</style>

JSFiddle Example

Answer 1

Matus Kozuch ，你好。我从头开始做这个，因为你有许多可能不需要的嵌套cols。

查看此 Fiddle ，看看您是否可以将此作为代码的起点。

如下所示，row中有3个图像垂直对齐。

我在这里做的是div居中，然后将图片放在div中。

这是垂直对齐div的CSS。

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}

enter image description here

<div class="container-fluid">

    <div class="row">
        <div class="col-lg-12">
        </div>
    </div>

    <div class="row row-clr">
        <div class="col-xs-3 col-xs-offset-0 col-sm-2 col-sm-offset-2 block">
            <div class="block2 bg-image center">
        </div>
        </div>

        <div class="col-xs-3 col-xs-offset-1 col-sm-2 col-sm-offset-1 block">
            <div class="block2 bg-image center">
            </div>    
        </div>

        <div class="col-xs-3 col-xs-offset-1 col-sm-2 col-sm-offset-1 block">
            <div class="block2 bg-image center">
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-center">
            <h2>Some text here</h2>     
        </div>
    </div>

</div><!-- /.container -->

垂直对齐div class =“row”中的内容

1 个答案: