如何使两个div标记与CSS水平对齐？

如何使两个div标记与CSS水平对齐

我有两个div标签。一个包含文本，一个包含图像。它们并排排列，我希望第一个div中的文本与图像底部对齐。图像位于文本的右侧

---

或者应该是这样。当我使用各种CSS选项时，事情开始跳跃。

如果我正确理解了您的情况，您的情况如下：

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

由于这两个div相互独立，因此没有默认的方法实现这一点。要尝试的一件事是设置两个div的宽度，将图像div向右浮动，然后使用

clear

属性确保第二个div位于第一个div之下，如：

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

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

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

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

---

不确定这是否能完美地工作，但试一下。

不确定为什么会得到你想要的结果。你在什么浏览器上测试过这个？默认情况下，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>

.imageContainer{
宽度：你的宽度；
身高：你的身高；
}
.文本中心{
文本对齐：居中；
}
你的文字在这里

我不确定这是否是您所要求的，但您可以将一些图像相对定位到包含您提到的两个图像的div底部。否则，只需将文本和图像放在同一个div中，如：

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

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

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

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

这是一些文本。

如果不浮动图像，则文本应与div的底线对齐，从而与图像的底部对齐

---

编辑：是的，我刚刚意识到这是2个月大的，对不起。

Anthony，这是我想要的，但文字要与图像底部对齐。不在它下面。有什么想法吗？