Question

我在Bootstrap列中有一个绝对定位的div（相对定位）绝对div或列都没有定义的高度。但是，div div的最小高度为400px。

HTML

<section class="row row-eq-height"> 
    <div class="col-sm-6">
        <div class="section-content">
           ... content ...
        </div>
     </div>

     <div class="col-sm-6 section-img">
        ... full cover image ...
    </div>
 </div>

CSS

   @media screen and (max-width: 768px) {

  .section-content { position: absolute; }

  .section-img { min-height: 400px; }

  .row-eq-height {
    position: relative;
    min-height: 400px;
   }

当768px中的.section-content div屏幕在.section-img div上显示时。列的高度由放置在.section-img上的最小高度生成。我试图将列./section-img中的.section-content垂直居中。 //////

Answer 1

您不必使用表格。如果我理解正确，正如Rob所说，创建一个内部包装器并将父容器的display属性设置为table，将内包装设置为table-cell <{1}}

vertical-align: middle;

这里是CSS

<div class="col-sm-6 section-img">
  <div class="middle">... full cover image ...</div>
</div>

垂直居中div在相对div中与min-height

1 个答案: