Question

我有一个使用bootstrap的webproject。有一个包含两列的布局。左列有一个图像，右边有一个文本。文本应垂直居中于图像。第一个问题是使柱子的高度相同。我找到了以下工作解决方案：

<div class="col-md-4" id="exploreBox">
        <!-- <img class="img-responsive boxImage" src="https://placehold.it/150x100" /> -->
        <h3>Find a Campus</h3

        <div id="map-container">
            <div id="map"></div>
        </div>

        <!-- <div id="map"></div> -->
        <button class="btn btn-default learnMore" type="submit">GO NOW</button>
    </div>

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

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

CSS：

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

但我没有把桌子及其牢房的高度调整到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/）

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

1 个答案: