Question

我正在建立一个响应式网站，并正在使用网格系统。网格框当然没有设定的高度。它们很流畅。放置在它们中的图像将定义高度ad，然后它将根据视口的可用宽度进行缩放

我要做的是将文字放在图像上并垂直对齐图像中间的文字。

我已经阅读了很多关于垂直对齐的帖子，但似乎没有人用响应框来解决这个问题。

我使用仅为此示例复制网格系统所需的压缩css设置了一个小提琴。我正在使用2个灰色虚拟图像。我想将文字放在上并垂直对齐文字。怎么做？有任何想法吗？我更喜欢只用css做这个，除非绝对需要jquery但我认为css可以做到。

<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

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

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

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

Support for table-*

Answer 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;}

如何在具有（流体高度）的响应框内垂直居中文本

2 个答案: