浮箱集装箱留下来了短

我知道这是一个常见的问题，但我似乎无法得到它的权利。我已经尝试了一切，除了一件事会使这项工作，包括各种展示位置和清除和溢出设置的组合。这里是我的代码（剥离下来发帖）浮箱集装箱留下来了短

<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增长到人造图片框的高度，这样我就可以将其调整到该节中段？

来源

2009-10-01 Deverill

我才意识到我说：“中间对齐”。如果不清楚，我想让它垂直对齐框的中间 - 即人造图片框的中间。谢谢 – Deverill 2009-10-01 20:33:16

没有真正的去了解你正在尝试做的好方法。由于你的图像在它自己的div中浮动到左边，所以很难让你的文本div与它对齐。

我只想给文字的div一些边距，使其ATLEAST地方开始图像的中间附近，但显然这不是一个具体的解决方案及其更多的另一种选择。

如果您确实需要使用它为中心，这些链接可以帮助之一，

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

或

webtoolkit.info/css-vertical-align.html

或者你可以尝试把图像和文字一起一个div标签，并让图像垂直对齐：中间，只要不存在将文本对齐到图像中间的换行符。

来源

2009-10-01 20:55:35

太棒了！第一个链接将我带入当前的解决方案中...将文本与图像放在一起，并为图像提供v-align：middle属性。正如你所说，把一个
在那里管起来，但我会检查对方的链接，看看我能做些什么来得到它恰到好处。有些东西只是不想在CSS中:)感谢指针！ – Deverill 2009-10-02 01:26:52

浮箱集装箱留下来了短

回答

相关问题