gpt4 book ai didi

html - 在不知道大小的情况下水平和垂直居中绝对定位元素

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

<分区>

我什至不知道仅使用 CSS 是否可行,但我不得不问。

请相应地阅读规范,然后再提供答案。谢谢!

我的标记:

<div class="wrapper">
<img src="http://placehold.it/350x150">
<p>Some text random size</p>
</div>

显然,.wrapper 将具有我的 img 元素的高度,如果它是一个 block 的话。然后,我需要 p 元素在包装器内水平和垂直居中。我没有 p 元素的固定宽度或高度。

因此,无论段落大小甚至图像大小,它都应该垂直和水平对齐,如下所示 http://i.imgur.com/phiR48H.png或这里 http://i.imgur.com/Xvdt42j.png .

如果我在段落上设置绝对位置,它不会垂直对齐,因为如果我不知道段落高度我就不能设置负边距。我在考虑表格和表格单元格(垂直对齐:中间;),但我只有 1 个单元格。有什么想法吗?

添加 fiddle :http://jsfiddle.net/f3x7977z/

重要的是所提供的解决方案具有向后兼容性,特别是在 IE8+ 中。

为了最终的结果,欢迎任何关于额外包装的建议!

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