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
2
Answers
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)
or figure out the row height in jquery and then set offsets for that
.text-cell
div in jqueryAdd this style :