gpt4 book ai didi

css - float 框使容器变短

转载 作者:行者123 更新时间:2023-11-28 15:02:31 28 4
gpt4 key购买 nike

我知道这是一个常见问题,但我似乎无法正确回答。我已经尝试了所有方法,除了可以使这项工作成功的一件事,包括各种放置以及清除和溢出设置的组合。这是我的代码(为了发布而删除)

<style>

#message { border:thin red dashed; overflow:hidden; }
#message p { border:thin red solid; }
#line1 { border:thin blue solid; }
#text { text-align:center; background-color:#FCF; vertical-align:middle;}
#photo { float:left; width:160px; border:thick black solid;}

</style>
</head>

<body>
<div id="Main">
<div id="line1">
<div id="message" >
<div id="photo" > <!-- floated pic box -->
Pretend a picture is here. Pretend a picture is here.
Pretend a picture is here. Pretend a picture is here.
</div> <!-- photo -->

<div id="text"> Click here to see all Key West Tours, Attractions and Packages<br />
Buy Online and Save!
</div> <!-- text -->

</div> <!-- message -->
</div> <!-- line1 -->
</div> <!-- Main -->

我希望文本居中对齐,我意识到这是因为实际的文本 div(粉色框)可以整天居中对齐,只要保持该高度就不会改变。

问题:如何让我的文本 div 增长到人造图片框的高度,以便我可以将它对齐到该部分的中间?

最佳答案

对于您正在尝试做的事情,并没有真正好的方法。由于您的图片在其自己的 div 中 float 到左侧,因此很难让您的文本 div 与其对齐。

我只是给文本 div 一些上边距,这样它至少从图像中间附近的某个地方开始,但显然这不是一个特定的解决方案,它更多的是另一种选择。

如果你绝对需要让它居中,这些链接之一可能会有所帮助,

phrogz.net/CSS/vertical-align/index.html

webtoolkit.info/css-vertical-align.html

或者,您可以尝试将图像和文本放在一个 div 标记中,并让图像垂直对齐:居中,只要不存在会使文本与图像中间对齐的换行符即可。

关于css - float 框使容器变短,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1506011/

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