How to vertically center text inside a sensitive block that has (liquid height)

Question

I create a responsive website and use a grid. Of course, mesh boxes do not have a given height. they are fluid. The image placed inside them will determine the height declaration, then it will scale with the available width of the viewport.

I am trying to make text on top of the image and vertically align the text in the middle of the image.

I read a ton of posts there on vertical alignment, but no one seems to address this with a responsive field.

I installed the fiddle using only the condensed css needed to replicate my grid for this example. I use 2 gray dummy images. I want to overlay text and align text vertically. How will this be done? Any ideas? Id prefers to do this only with css if jquery is absolutely necessary, but I think only css can do this.

http://jsfiddle.net/zjDuE/

<div class="grid"> <div class="row"> <div class="c6"><img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /></div> <div class="c6"><img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /></div> </div> </div> 

Answer 1

I think my code might be useful for you.

http://codepen.io/SzymonDziewonski/pen/gLebo

Try using vertical highlighting with display: table-cell and vertical center alignment will work for fluid height. Good luck :)

table-* support

Answer 2

It was my decision to center two lines of text in a module in a flexible grid-based template based on the good information presented here. Thank you very much!

 <ul> <li class="v-centertext"> <div class="v-font140">Call Us (Toll Free): <div class="v-font200">866-944-xxxx </div></div> </li> </ul> 

here is css:

 .v-centertext {position: relative;display: table; text-align: center;} .v-centertext div {display: table-cell; vertical-align: middle; text-align: center;} .v-font140 {font-size: 140%; line-height: 1.2em;} .v-font200 {font-size: 200%; line-height: 1.3em; color: #00679d;}