相关疑难解决方法(0)

我正在使用Twitter Bootstrap 3,当我想垂直对齐时我遇到问题div,例如 - JSFiddle链接:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap中的网格系统float: left不使用display:inline-block,因此该属性vertical-align不起作用.我尝试使用margin-top它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.

我在span使用Bootstrap 2.3.2的垂直中间问题上有一个非常简单的问题.

要求:

1. 有两列,左列有固定高度300px,因为里面有300x300图像.

2. 右列有文本,必须根据左列居中.

3. 整个过程必须要有回应.这就是我使用响应式图像的原因.

4. 如果第二列向下到底,则其高度必须符合文本的大小.这意味着我无法在第二列上设置固定高度.

5. 一定不要用JS来解决这个问题.

HTML:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
        <img class="img-responsive" src="http://placehold.it/300x300"/>
    </div>
    <div class="span6 v-center">
        <div class="content">
            <h1>Title</h1>
            <p>Paragraph</p>
        </div>
    </div>
  </div>
</div>

CSS:

.v-center {
    display:table;
    border:2px solid gray;
    height:300px;
}

.content {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

我的代码: http ://jsfiddle.net/qhoc/F9ewn/1/

你可以看到我做了什么上面:我基本上设置第二列span的表,middle该.content表单元格.我在这里复制了这个方法如何在bootstrap中使用vertical align(这里有工作示例http://jsfiddle.net/lharby/AJAhR/)

由于上述要求,我的挑战有点不同.有关如何使其工作的任何想法？谢谢.