Question

我知道这种问题已被多次询问，但我不确定它是否真的要求灵活的高度格。我搜索过并搜索了许多解决方案position:absolute，但这通常会破坏图像的响应性（使图像不是width:100%并将它们排除在列之外。

我主要关注的问题是我的div与height:100%有关，我无法将内部div与图像和内容放在位置中心。

这是我的代码：

<div class="container-fluid full-height">
    <div class="row full-height">
        <div class="col-sm-3 col-md-3 col-lg-3 person-info">
            <blockquote>
                <h1>Stavros Theccharidis</h1>
                <footer>Cell line Development / Early Process Devellopement</footer>
            </blockquote>
            <div class="well">
                <h3>Prozessen:</h3><hr/>
                <h4>Tech Transfer PM Analytic</h4>
            </div>
        </div>
        <div class="col-sm-5 col-md-5 col-lg-5 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 person-photo">
            <img class="img-responsive" src="thumbs/andreas.png" />
        </div>
    </div>
</div>

所以我找到的任何解决方案都使用固定高度div，但我的div需要在列person-info内的100％高度和内容以及person-photo内的图像为中心对齐。

Answer 1

你想要这样的东西吗？中心在垂直和水平轴上对齐？

在父级上使用display:flex;align-items: center;justify-content: center;以便对齐孩子

使用此功能，以免与其他浏览器存在兼容性问题

}
   display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* Firefox 19 */
   display: -ms-flexbox;      /* IE 10 */
   display: -webkit-flex;     /* Chrome */
   display: flex;             /* Opera 12.1, Firefox 20+ */
}

.person-info,.person-photo {
  display: flex;
  align-items: center;
  justify-content: center;

}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid full-height">
    <div class="row full-height">
        <div class="col-sm-3 col-md-3 col-lg-3 person-info">
            <blockquote>
                <h1>Stavros Theccharidis</h1>
                <footer>Cell line Development / Early Process Devellopement</footer>
            </blockquote>
            <div class="well">
                <h3>Prozessen:</h3><hr/>
                <h4>Tech Transfer PM Analytic</h4>
            </div>
        </div>
        <div class="col-sm-5 col-md-5 col-lg-5 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 person-photo">
            <img class="img-responsive" src="http://placehold.it/150x150" />
        </div>
    </div>
</div>

中心对齐高度内的图像和内容：引导列中的100％div？

1 个答案: