在引导程序列中将图像和内容居中对齐在height：100％div之内？

debugcn 发表于 Dev

亚历山大·乔丹耶维奇（Aleksandar Djordjevic）

我知道这种问题已经问过很多次了，但是我不确定是否确实要求使用灵活的高度div。我到处搜索并搜索了很多解决方案，position:absolute但这通常会破坏图像的响应能力（使图像不响应，并使width:100%它们脱离列。

我主要height:100%遇到的问题是我的div与我在一起，而我无法将具有图像和内容的内部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内person-photo，并且图像内应居中对齐。

米海

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。