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

Posted 2023-03-05

【中文标题】如何在具有（流体高度）的响应框中垂直居中文本[重复]

【英文标题】：How do I vertically centering text inside a responsive box that has a (fluid height) [duplicate]

【发布时间】：2013-09-16 03:24:22

【问题描述】：

我正在构建一个响应式网站并使用网格系统。网格框当然没有设定高度。它们是流动的。放置在其中的图像将定义高度广告，然后它将随着视口的可用宽度缩放

我要做的是将文本覆盖图像并将文本垂直对齐图像中间。

我已经阅读了大量关于垂直对齐的帖子，但似乎没有一个解决使用响应框进行此操作的问题。

我使用唯一的压缩 css 设置了一个小提琴，以复制这个示例的网格系统。我正在使用 2 个灰色虚拟图像。我想将文本覆盖并垂直对齐文本。这将如何完成？有任何想法吗？除非绝对需要 jquery，否则我更喜欢仅使用 css 执行此操作，但我认为仅 css 就可以做到。

http://jsfiddle.net/zjDuE/

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

【参考方案1】：

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

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

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

Support for table-*

【讨论】：

非常感谢您设置 codepen。问题是我仍然认为根据我在 jsfiddle 链接上为您设置的特定实例，这将不起作用。响应式 div 中已经有一个图像，所以我需要将文本放在该图像上，并且我认为我需要使用绝对定位来堆叠在图像之上。如果您查看我的 jsfiddle 网址，那些灰色框代表图像。我需要将文本放在图像上并垂直对齐文本。

使用纯 css 我不可能，但我为你做了 jQuery 小提琴的例子。看看这个jsfiddle，希望对你有帮助:)

太棒了！正是我想要做的。非常感谢你帮助我。非常感谢您在这方面的时间和帮助！

没问题我很高兴能帮上忙 :)

解决了我的问题，谢谢！ （一年后）

【参考方案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;

【讨论】：

感谢您分享这个:)