如何獲得兩個div標籤與CSS水平對齊？

Question

如何獲得兩個div標籤與CSS水平對齊？

我有兩個div標籤。一個包含文本，另一個包含圖像。它們並排排列，我希望第一個div中的文本與圖像底部對齊。圖像位於文本的右側。

或者它應該是這樣。當我玩各種CSS選項時，事情開始跳躍。

Answer 1

如果我在讀你的情況吧，你有這樣的情況：

<div id="some_text"> 
    This is some text. 
</div> 
<div id="some_image"> 
    <img src="some_img.png" /> 
</div> 

而且要在第一個div文本在第二個div，如圖像的底部開始：

       |-------------------| 
          |     | 
          |  Some Image | 
          |     | 
          |     | 
          |-------------------| 
      Some Text 

由於兩個div彼此獨立，因此沒有默認的方法來解決這個問題。有一件事是嘗試同時設置的div的寬度，浮動圖像股利的權利，然後使用clear屬性，以確保第二DIV是第一DIV下，如：

#some_image { 
    width: 50%; 
    float: right; 
} 

#some_text { 
    width: 50%; 
    clear: right; 
} 

不知道如果這可以完美的工作，但試試看。

Answer 2

不知道爲什麼你會得到你的結果。你測試過哪些瀏覽器？默認情況下，div元素是塊級別，這意味着它們應該堆疊在彼此之上並拉伸整個屏幕長度。你不應該做任何額外的格式來獲取div元素堆棧。下面的代碼會給你你想要的。你可以這樣做：

<style type="text/css"> 
    .imageContainer { 
     width: yourWidth; 
     height: yourHeight; 
    } 

    .textCenter { 
     text-align: center; 
    } 
</style> 


<div class="textCenter imageContainer"> 
    <img src="yourSourceHere"> 
    <div> Your text Here </div> 
</div> 

Answer 3

我不知道這是否是你所要求的東西，但你可以相對位置#some_image到div的底部包裹你提到的兩個。否則，只是把在同一div文本和圖像，如：

<div id="some_div"> 
    This is some text. 
    <img src="some_img.png" /> 
</div> 

如果你不上浮的圖像，然後將文本應該對齊到div的底線，因此，對齊到圖像的底部。

編輯：是的，我剛剛意識到這是2個月大，對不起。