Twitter Bootstrap Question posted in

Twitter bootstrap – vertically centring relative position + unknown height

I have two columns in my WP site. One has text/content the other a background image. Both are relatively positioned and the heights are unknown.

HTML (using twitter – bootstrap 3 markup )

<article>

  <div id="...removed php code ">

      <div class="row">

         <div class="col-md-8 indx-img" style="background-image:url('...');">
         </div>

         <div class="col-md-4 text-cell">
           <h1><?php the_title(); ?></h1>
           <h3><?php the_category(' '); ?></h3>
         </div>      

      </div><!-- /row --> 

</article>

CSS

.indx-img {
  position: relative;
  padding: 16% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.text-cell {
  position: relative;
  padding: 0 25px;
  margin: 0;
}

I want the text-cell div to be vertically centered in its column. The height of the column is set by its adjacent column index-img div with the padding: 15% 0

Tags:

2

Answers


  1. 0

    you can fiddle around with the transform translate percentage and a margin-top percentage..something like (play with x and y number to get desired result) 

    .text-cell {
  position: relative;
  padding: 0 25px;
  margin: x% 0 0;
  transform: translateY(y%)
}

    or figure out the row height in jquery and then set offsets for that .text-cell div in jquery

    Login or Signup to reply.
  2. 0

    Add this style :

    .text-cell {
     display     : flex; 
     align-self  : center;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search