Question

我想垂直对齐（顶部对齐或中间对齐）右侧列中的视频和左侧列中的文本。鉴于下面的代码，我该怎么做？

<div class="container">
    <div class="jumbotron text-center">
      <div class="row">
        <div class="col-md-6">
          <h1>Heading<br>Text</h1>
          <p>Bacon ipsum dolor sit amet ham hock cow swine meatball salami short loin. Fatback boudin sausage ham. Meatloaf pork chop corned beef, andouille t-bone pancetta flank. Drumstick meatloaf pancetta bresaola, turducken biltong jowl prosciutto ground round kevin venison beef ribs shoulder chuck ham.</p>
          <a class="btn btn-success btn-lg" href="#">Submit</a>
        </div>
        <div class="col-md-6">
          <iframe src="http://fast.wistia.net/embed/iframe/huifu25cy3?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="440" height="248"></iframe><script src="http://fast.wistia.net/assets/external/iframe-api-v1.js"></script>
        </div>
      </div>
    </div>
  </div>

Answer 1

我的建议是使用jQuery，这是一个简单的解决方案，抱歉我必须在现有代码上添加一些ID

<div class="container">
 <div class="jumbotron text-center">
  <div class="row" id="some_id">

    <div class="col-md-6">
      <h1>Heading<br>Text</h1>
      <p>Bacon ipsum dolor sit amet ham hock cow swine meatball salami short loin. Fatback boudin sausage ham. Meatloaf pork chop corned beef, andouille t-bone pancetta flank. Drumstick meatloaf pancetta bresaola, turducken biltong jowl prosciutto ground round kevin venison beef ribs shoulder chuck ham.</p>
      <a class="btn btn-success btn-lg" href="#">Submit</a>
    </div>

    <div class="col-md-6">
      <iframe id="iframe_id" src="http://fast.wistia.net/embed/iframe/huifu25cy3?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="440" height="248"></iframe>
      <script src="http://fast.wistia.net/assets/external/iframe-api-v1.js"></script>
    </div>
  </div>
</div>

这是jQuery脚本：

// Vertical center
function vericalCenter() { 
if ($('.container').width() > 969) {
 $('#iframe_id').css({
     "margin-top": ((($('#some_id').height() - $('#iframe_id').outerHeight()) / 2) + $('#some_id').scrollTop() + "px")
    });
  };
};

$(document).ready(function(){
 vericalCenter();               
});

$(window).resize(function(){        
 vericalCenter();                   
});

这是演示，只需记住将结果帧的大小调整为大于970px以便查看结果。

http://jsfiddle.net/darkosss/CzNUQ/

在Bootstrap 3响应网格中垂直对齐两列div

1 个答案: