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>
4

2 回答 2

7

我认为我的 codepen 可能对你有用。

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

尝试使用vertical-alight with display: table-cell ，您的中心垂直对齐将适用于流体高度。祝你好运 ：）

支持table-*

于 2013-09-12T00:24:32.627 回答
2

这是我在基于网格的响应式模板中将模块内的两行文本居中的解决方案，基于此处提供的良好信息。非常感谢！

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

这是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;}
于 2013-11-26T18:34:16.690 回答