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

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -