CSS / Bootstrap：文本垂直居中对齐

Question

我有一个使用引导程序的网络项目。 有一个包含两列的布局。左栏有图片，右栏有文字。文本应垂直居中于图像。 第一个问题是让列的高度相同。 我找到了以下可行的解决方案：

.col {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
  height:100%;
}

为了使文本垂直居中，我在右行插入了以下 html：

<div class="table">
  <div class="cell">My text</div>
</div>

CSS：

.table {
  height:100%;
  width:100%;
  display:table;   
}

.cell {
  display:table-cell;
  vertical-align:middle;
  height:100%;
}

但我没有让表格及其单元格达到父级的 100% 高度。绝对位置也不起作用，因为底部：0 是 99999px；

有人知道我能做什么吗？谢谢

Answer 1

我觉得如果可以的话，尽量用flex-box代替固定网格。

以下是您的 CodePen 示例：http://codepen.io/anon/pen/RaNYLG

HTML：

<div class="row">
  <div class="column">
    <p> Here you have some content.</p> 
  </div>
  <div class="column">
    <p> Here you can have a lot of text as well, but i will make longer since you need to understand how to vertically align your content. In this case you will see that the content being aliged will be the other. Take this just as an example.</p>
  </div>
</div>

还有 CSS：

.row{
  display:flex;
}

.column{
  display:flex;
  width:50%;
  align-items:center;
}

（以及学习如何正确使用 flex 属性：http://flexboxfroggy.com/）