HTML/CSS：在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>

结果是我正在努力工作的

（灰色div处于焦点）

---

请不要使用

align

属性。它已经过时了。您可以更好地使用CSS。 您将需要创建至少三个父级

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>

---

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

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

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

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

---

使用float left将使它们彼此相邻对齐

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

内容在这里

---

您需要更加明确…

请显示尝试此操作的当前HTML。不清楚您到底在哪个部分遇到了问题，为什么不只是

边距
？我想您应该从@stackular开始。我试过了，但我一直在寻找一种不需要太多人工计算的组织方式。@mr5:您是否试图将内容垂直和水平居中？确保内容在其中并指定如果可以的话，宽度/高度也一样（如果布局是固定的）。@michaeloops。我以为他迷路了什么的。约翰，你很快就会通过阅读许多像这样的帖子了解到，这些帖子都有实际问题，而且对html一无所知。大多数时候，他们要么是在某个不想上的课程中，不想学习基本的HTML和CSS，要么是那些想要一个网站但自己却做不到的人，不能花钱去做，所以他们会问这样的问题来获取代码片段。在这种情况下，最好的办法是鼓励他们自己尝试，当他们在代码方面遇到实际问题时再回来，而不是缺乏专业知识。@Michael抱歉，我真的不知道。我也是新来的。下一次我将遵循你的方法。谢谢。无需说抱歉，我可以从您的代表那里得知您的新消息，因此发表评论；）这里的其他一些人会跳下你的喉咙对你大喊大叫，因为他们在这里工作，因为他们讨厌自己的工作。我想我会在有人对你那样做之前介入；）
<div style="position: relative">
    <div style="position: absolute;top: 50px;right: 100px;bottom: 50px;left: 100px;text-align: center">
        content goes here
    </div>
</div>