html - 对 "div"在 HTML 中的用法感到困惑

Question

我尝试使用 HTML 和 CSS 将 PSD 转换为网页。

<div id="header-text-nav-wrap" class="clearfix">
    <div id="header-left-section">
        <div id="header-logo-image">
            <img src="D:\logo landing page.png">
        </div>
        <!-- #header-logo-image -->
    </div>
    <!-- #header-left-section -->
    <div id="header-right-section">**
        <div Id="member-login" class="member-login-box" style="width:218px; height:60px; background-color: #00B1F4;">
            <p>Member Login</p>
        </div>**</div>
    <!-- #header-right-section -->
</div>
<!-- #header-text-nav-wrap -->
</div>
<!-- .inner-wrap -->

在这里，我遇到了代码粗体部分的问题。我试图将文本“成员(member)登录”对齐到矩形框的中间。它本身就是一个具有指定大小的“div”。因此，如您所见，我只是为文本创建了另一个“div”。但是当我尝试应用“vertical-align: middle;”时在“text div”上它不起作用。此外，当我尝试在同一个 div 上应用“margin-top”时，它被应用到矩形框上。

Answer 1

使用这个 css -

#header-right-section {
position: relative;
}
#member-login {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /* Don't forget to add vendor prefixes */
}

div 不能通过vertical-align: middle 代码直接垂直对齐。 Jared Farrish 在评论中建议使用 line-height 的技巧，将使用 vertical-align 对齐 div。