jquery - Verticaly center text on a percentage-based design? -
so i'm creating design kinds of phone screens. instead of using multiple @media queries, im creating design based on percentages , acceptable variaties of screens.
one of things should included portfolio 'list'. list of items, each containing image (that should adjust automaticly size of container it's in) , title, next it.
however: instead of positioned @ top, should verticaly centered. i've tried few suggestions on stackoverflow , other sites.. couldn't work.
please check this jsfiddle
i've couldn't things work, such as
div { width: 250px; height: 100px; line-height: 100px; text-align: center; } span { display: inline-block; vertical-align: middle; line-height: normal; } so hope knows solution. keep in mind: should percentage based, since rest too.
thanks!
perhaps you're looking this: jsfiddle?
by adding
position:relative to container able specify individual positioning child elements, allowed me center text responsively. please let me know if wasn't looking for.
.port_nav { background-color:rgba(255,255,255,0.3); width:80%; margin: 88px auto 0 auto; height:80%; position: relative; } and individual images (added span make selection less problematic):
.port_nav .item .image { position: relative; width:30%; float:left; height:100%; background-color:rgba(255,255,255,0.3); } .port_nav .item .image span { position: absolute; width: 100%; text-align:center; }
Comments
Post a Comment