Question

我试图在引导容器中垂直居中一些div，这些div可以根据其他列内容调整大小。我想在没有flexbox的情况下执行此操作以实现向后兼容性。

我正在尝试使用translateY（）技巧，但是父行的高度为0，因此它将自身居中放在行的顶部而不是中间。

我已经读过浮动的物品占据了孩子的高度，所以我试着漂浮它们，但它仍然没有达到高度。

如何将此行设置为100％，以便垂直居中正常工作？

＆＃13;

    .container{
      margin-top: 60px;
    }

    .outer, .container{
      border: 1px solid #000;
    }

    .row-center{
      position: relative;
      /* This needs to be 100% height but I can't figure it out */
      /* I added the floats but it didn't help */
      height: 100%;
      float: left;
    }

    .outer{
      position: absolute;
      float: left;
      top: 50%;
      transform: translateY(-50%);
    }

＆＃13;

    <div class="container">
      <div class="row">
        <div class="col-sm-5"><img src="http://placehold.it/350x500"></div>
        <div class="col-sm-7 row-center">
          <div class="outer">
            <div class="one">some text</div>
            <div class="two">some text</div>
          </div>
        </div>
      </div>
    </div>

＆＃13;

（示例代码假定引用了引导程序css）

附带引导程序的代码笔：http://codepen.io/GuerrillaCoder/pen/obJEgB

Answer 1

尝试：

.outer, .container{
    border: 1px solid #000;
    vertical-align: -webkit-baseline-middle;
    padding: 5px;
}

.row-center{
    position: relative;
    width: auto;
    height: 100%;
    float: left;
}

如果这不起作用，请对padding申请div。

Answer 2

将<?php foreach ($tableentries as $entry) : ?> <a href="#some<?php echo $entry['id']?>"/> <div class="remodal" data-remodal-id="some<?php echo $entry['id']?>"> do stuff with that modal </div> <?php endforeach; ?>提供给position: unset;，将.row-center提交给position:relative;将为您效劳。

<强> Working Fiddle

垂直居中不起作用，因为行未达到100％高度

2 个答案: