Aleksandar Đorđević Aleksandar Đorđević - 3 months ago 13
CSS Question

Center align image and content within height:100% div in bootstrap columns?

I know this kind of question has been asked many times, but i am not sure if it's exactly asked for flexible height div's. I have searched around and googled and many solutions come with

position:absolute
but that usually breaks responsiveness of images (makes the images not
width:100%
and puts them out of column.

The problem that i mainly have is that my div's are with
height:100%
and i can't get the inner divs with image and content to position center.

Here is my code:

<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>


So any solution that i found working is with fixed height divs, but my div's need to be with 100% height and content inside columns
person-info
and image inside
person-photo
to be center aligned.

Answer

you want something like this ? center aligned on both vertical and horizontal axis ?

use display:flex;align-items: center;justify-content: center; on parent in order to align the children

use this so you don't have compatibility issues with other browsers

}
   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>