如何获得两个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个月大，对不起。