浮箱集裝箱留下來了短

我知道這是一個常見的問題，但我似乎無法得到它的權利。我已經嘗試了一切，除了一件事會使這項工作，包括各種展示位置和清除和溢出設置的組合。這裏是我的代碼（剝離下來發帖）浮箱集裝箱留下來了短

<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

浮箱集裝箱留下來了短

回答

相關問題