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的宽度，将图像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个月了，抱歉。

如何让两个div标签与CSS水平对齐？

3 个答案: