7

I am building a responsive website and am using a grid system. The grid boxes of course do not have a set height. they are fluid. The image that is placed within them will define the height ad then it will scale with the available width of the viewport

What I am trying to do is lay text over the image and vertically align the text in the middle of the image.

I have read a ton of posts out there on vertical aligning but none seem to address doing it with a responsive box.

I set up a fiddle using the only the condensed css necessary to replicate my grid system for this example. I am using 2 grey dummy images. I want to lay text over them and align the text vertically. How would this be done? Any ideas? Id prefer to do this only with css unless jquery is absolutely needed but I think css alone can do it.

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>
DC1
  • 371
  • 1
  • 4
  • 15

2 Answers2

7

I think my codepen could be usefull for you.

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

Try to use vertical-alight with display: table-cell and your center vertical align will work for fluid heights. Good luck :)

Support for table-*

Adam Azad
  • 11,171
  • 5
  • 29
  • 70
Szymon
  • 1,281
  • 1
  • 20
  • 36
  • Thank you very much for setting up the codepen. The issue is that I still think that will not work based on the specific instance that I have setup on my jsfiddle link for you. There is an image already in the responsive div so I need to lay the text over that image and i assume i would need to use absolute positioning to stack on top of the image. If you look at my jsfiddle url, those grey boxes represent images. I need to lay the text over the images and vertical align the text. – DC1 Sep 12 '13 at 14:06
  • With pure css I dont its possible but I did for you example on your fiddle with jQuery. Check this [jsfiddle](http://jsfiddle.net/8fFx8/) out, hope it helps :) – Szymon Sep 12 '13 at 23:47
  • That is excellent! Just what I was trying to do. Thank you very much for helping me with that. I really appreciate you're time and help on this! – DC1 Sep 13 '13 at 00:52
  • Solved my problem, thanks! (1 year later) – user3100907 Aug 22 '14 at 16:45
2

This was my solution for centering two lines of text within a module in a a grid-based responsive template, based on the good info presented here. Thanks so 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;}
Vicky
  • 21
  • 1