user3550879 user3550879 - 27 days ago 9
CSS Question

vertically centered with adjustable parent heights

I am using Bootstrap framework with two

col-sm-6
class columns. They are matched in height using
row-eq-height
since the adjacent column contains just a background image.

Updated code:



section, .section-img {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
margin: 0; padding: 0;
}

.row-eq-height {
position: relative;
min-height: 400px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.row-eq-height > * {
flex: 1;
}
.section-content {
text-align: center;
}

<section class="row row-eq-height">
<div class="col-sm-6">
<div class="section-content">
.... content of post ...
</div>
</div>

<div class="col-sm-6 section-img" style="background-image:url('<?php ... image code ... ?>>
... image taking up all the space ....
</div>

</section>





The code centers and adjusts when height increases but removes the image height (equal height of row). The image should be as tall as the column adjacent to it so the picture shows

output:

enter image description here
enter image description here

Answer

Since you already use flexbox you can skip the position:absolute, transform: translate(),... part to center things and use flexbox own properties for that.

As you use a min-height (which kind of mess with flexbox a little), I added a wrapper for it to work.

.row-eq-height {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrapper {
  display: flex;
}
.col-sm-6 {
  flex: 1;
}
.section-content {
  text-align: center;
}
.section-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
<section class="row row-eq-height">
  <div class="wrapper">
    <div class="col-sm-6">
      <div class="section-content">
        .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
        <br> .... content of post ...
      </div>
    </div>
    <div class="col-sm-6 section-img" style="background-image: url(http://lorempixel.com/300/300/nature/1)">
    </div>
  </div>
</section>

Comments