gpt4 book ai didi

css - 如何在具有(流体高度)的响应框中垂直居中文本

转载 作者:技术小花猫 更新时间:2023-10-29 11:09:31 25 4
gpt4 key购买 nike

<分区>

我正在构建响应式网站并使用网格系统。网格框当然没有设置高度。它们是流动的。放置在其中的图像将定义广告的高度,然后它将根据视口(viewport)的可用宽度进行缩放

我想做的是将文本放在图像上,并在图像中间垂直对齐文本。

我已经阅读了大量关于垂直对齐的帖子,但似乎没有一篇提到如何使用响应式框来实现这一点。

我设置了一个 fiddle ,只使用了为这个例子复制我的网格系统所必需的压缩 css。我正在使用 2 个灰色虚拟图像。我想将文本放在 over 上并垂直对齐文本。这将如何完成?有任何想法吗?除非绝对需要 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" alt="-" /></div>
<div class="c6"><img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /></div>
</div>
</div>

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com