javascript - vertically centring relative position + unknown height -
i have 2 columns in wp site. 1 has text/content other background image. both relatively positioned , heights 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 text-cell
div vertically centered in column. height of column set adjacent column index-img
div padding: 15% 0
you can fiddle around transform translate percentage , margin-top percentage..something (play x , y number desired result)
.text-cell { position: relative; padding: 0 25px; margin: x% 0 0; transform: translatey(y%) }
or figure out row height in jquery , set offsets .text-cell
div in jquery
Comments
Post a Comment