vertical alignment - Centering Text with Unknown Heights Issues -

vertical alignment - Centering Text with Unknown Heights Issues -

i realize questions have been asked , answered; i've searched on multiple sites , have not found solution i've been able create work me. need vertically center text unknown heights; i've tried pseudo elements , different display types, including table , table-cell (which still in css).

you can see my site current result.

i have altered code in jsfiddle, real code below. also, i've noticed jfiddle code looks different result i'm getting on site. same code, jfiddle version doesn't text-align center. maybe other css or jquery helping site's code.

the actual code:

<div class="pinbin-image"> <div class="rollover-item"> <div id="hover"> <div class="link-text"> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> </div> </div> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'summary-image' ); ?></a> </div> </div>

the css:

#post-area .pinbin-image { display:inline-block; } .rollover-item { position:relative; overflow:hidden; } #hover { transition: 0.2s linear; -moz-transition: 0.2s linear; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; opacity: 0; } #hover { background-color: #fff; position: absolute; text-align: center; vertical-align: middle; text-decoration: none; } #hover { height: 90%; left: 6.38%; top: 4.8%; width: 87%; } #hover:hover { opacity: 0.75; } .link-text { position: absolute; text-align: center; vertical-align: middle; display: table; } .link-text h2 a:link { color: #333333; font-family: "century gothic", centurygothic, applegothic, sans-serif; font-size: 23px; line-height: 23px; text-decoration: none; padding: 20% 20px; width: 100%; display: table-cell; vertical-align: middle; text-align: center; } .rollover-item:hover .description { top:0; }

table , table-cell works fine me.

html:

<div id="parent"> <span id="child">vertically centered</span> </div>

css:

#parent { height:100%; display: table; } #child { display: table-cell; vertical-align: middle; }

and may not position link absolute

try next in jsfiddle.

css:

#post-area .pinbin-image { display:inline-block; } .rollover-item { position:relative; overflow:hidden; } #hover { transition: 0.2s linear; -moz-transition: 0.2s linear; -webkit-transition: 0.2s linear; -o-transition: 0.2s linear; opacity: 0; } #hover { background-color: #fff; position: absolute; text-align: center; vertical-align: middle; text-decoration: none; } #hover { padding:50% 0; left: 6.38%; top: 4.8%; width: 87%; display:table;} #hover:hover { opacity: 0.95; } .link-text { position: static; text-align: center; vertical-align: middle; display: table-cell; } .link-text h2 a:link { color: #333333; font-family: "century gothic", centurygothic, applegothic, sans-serif; font-size: 23px; line-height: 23px; text-decoration: none; padding: 20% 20px; width: 100%; display: table-cell; vertical-align: middle; text-align: center; } .rollover-item:hover .description { top:0; }

html:

<div class="pinbin-image"> <div class="rollover-item"> <img src="http://neoqueenhoneybee.com/blog/wp-content/uploads/2014/03/1381568_549239698487215_587096537_n-750x561.jpg" alt=""/> <div id="hover"> <div class="link-text"> <h2><a href="<?php the_permalink() ?>">pokemon: snivy</a></h2> </div> </div> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'summary-image' ); ?></a> </div> </div>

btw. code hard read. seek not repeat same selectors.

--

from here: http://www.vanseodesign.com/css/vertical-centering/

scroll downwards to: css table method

vertical-alignment