使用 valign: top 将 div 中心对齐

Question

看看这里http://www.basenharald.nl/3d。 对于 home 部分，我添加了一些黑色边框，以便您了解我的意思。

问题： 我需要将 2 个块（“嘿”块和右侧部分）彼此相邻放置在中心，并将它们从那里单独放置。 合乎逻辑的做法是使用 display: inline 块。现在的问题是它没有对齐顶部，所以我不能用边距定位它们。

基本上我想要做的是将“嘿”部分稍微向左定位，将“右”部分定位在稍微向右和向下。

最好的方法是什么？由于透视效果和分辨率，它需要始终居中。 希望我足够清楚，否则就问吧。

这是我正在谈论的 css 部分：

#home-welkom { text-align:left; width: 465px; margin: 360px 400px 100px; 230px; margin: 0 auto; display: inline-block;  color:#787778; font-size:11px; border:1px solid black; }
#home-right { text-align:left; width: 330px; margin: 50px 0px 0 0; position: relative; margin: 0 auto; display: inline-block; border:1px solid black; }

也不是说 margin 属性根本不影响 div

Answer 1

您将不得不重新考虑您的设计策略。这里有几点建议：

• 使用 div 而不是列表来布局您的页面（列表适用于菜单等）
• 每个类只能使用一次边距
• 使用 div 浮动将 div 并排放置
• 将您的 javascript 存储在外部，这样您的代码会更干净

现在对于您的问题，这就是您要定位元素的内容：

<div id="wrapper" style="position: relative; margin: 0 auto; width: 800px; text-align: left">
<div id="leftcol" style="float: left; width: 400px;">left column</div>
<div id="rightcol" style="float: left; width: 400px;">right column</div>
</div>

最后，我会确保并验证我的代码，您可以在这里进行验证：http://validator.w3.org/

希望这会有所帮助。