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

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -