HTML/CSS：在 div 中对齐内容

Question

如何使用align 属性对齐</div> 中的元素，如下图所示：

• e1:align="top"
• e2:align="right"
• e3:align="bottom"
• e4:align="left"

编辑：所以在这种情况下，我不清楚我想告诉什么。这不是作业或其他任何东西，只是想自己学习HTML / CSS。我只是在问如果是否可以仅使用align 属性来实现。

希望我正在制作的东西中的这段代码 sn-ps 将帮助您了解我真正想要实现的目标：

<div id="container">

    <div id="nav-vbar">
    <button class="btnV" align="top"></button>
    <button class="btnV" align="bottom"></button>
    </div>

    <div id="navigation">
    </div>

    <div id="nav-hbar">
    <button class="btnH" align="left"></button>
    <button class="btnH" align="right"></button>
    </div>

    <div id="preview">
    </div>

</div>

我正在努力工作的结果(grayed divs are in focus)

Answer 1

用你需要的任何东西替换 500px 和 200px。

<div style="width: 500px;height: 200px;margin: 0 auto;display: table;">
    <div style="display: table-cell; vertical-align: middle;height: 100%;text-align: center;">
        content goes here
    </div>
</div>

从那个草图中理解你想要什么有点困难。给我一些关于这有多接近的反馈。因为据我所见，你可以很好地使用这样的东西：

<div style="position: relative">
    <div style="position: absolute;top: 50px;right: 100px;bottom: 50px;left: 100px;text-align: center">
        content goes here
    </div>
</div>

你需要更明确...

Answer 2

首先不要使用 align 属性。在那种程度上，我什至不确定你是否能够使用它来管理它。你应该使用 CSS 和浮动，甚至是 inline-block。

就此而言，您应该看看Code Academy。他们有关于 HTML、CSS 等的免费网络教程。他们也不仅仅是一些阅读，还有实际的练习。

现在...我不会给你一套完整的 HTML/CSS，因为这里几乎没有其他人会这样做，我们也不应该这样做。这个地方是为了帮助你解决问题。缺乏知识并不是代码的问题。做一些工作和谷歌搜索以及一些简单的实验来自己尝试。当您遇到实际问题时回来告诉我们。

也就是说，要实现这种结构，您需要 4 个 div 来管理主要的 3 列布局。一个家长，三个孩子。一个 div 包装所有其余部分，将被视为“包装器”或“容器”。其他 3 个 div 中的第一个是您的左列，第二个 div 是另一个包装器，其中包含另外 3 个 div（e1、e3 和中间的空白），然后第三个 div 是您的右列。

使用左浮动将使它们彼此相邻对齐。

Answer 3

请不要使用align 属性。它已经过时了。您可以更好地使用 CSS。 您将需要创建至少三个父 <div>s。

你可以这样做：

<div class="wrapper">

    <div class="e4">
    </div>

    <div class="middle">

        <div class="e1">
        </div>

        <div></div>

        <div class="e3">
        </div>

    </div>

    </div class="e2">
    </div>

</div>

然后为它们添加样式

样式可以像

.wrapper {

}

.e4 {
float: left;
}

.e2 {
float: right;
}

.e1 {
display: block;
}

.e3 {
display:block;
}