HTML / CSS：在div中对齐内容

Question

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

• 的 E1 ：align="top"
• 的 E2 ：align="right"
• 的 E3 ：align="bottom"
• 的 E4 ：align="left"

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

希望这段代码能够帮助你理解我真正想要实现的目标：

<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

首先不要使用align属性。在那种程度上，我甚至不确定你是否能够使用它来管理它。您应该使用CSS和浮点数甚至内联块。

在这种程度上，你应该看看Code Academy。他们有关于HTML，CSS等的免费网络教程。它们也不仅仅是一些阅读，还有实际的练习。

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

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

使用float left会将它们全部对齐。

Answer 2

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

您可以执行以下操作：

<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;
}

Answer 3

用您需要的任何东西替换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>

你需要更明确......