Question

我试图使用HTML＆amp; amp;将PSD转换为网页CSS。

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

在这里，我遇到了代码粗体部分的问题。我试图调整文本＆＃34;会员登录＆＃34;进入矩形框的中间。这本身就是一个＆＃34; div＆＃34;具有指定的大小。所以，正如你所看到的，我只是创造了另一个＆＃34; div＆＃34;对于文本。但是，当我尝试应用＆＃34; vertical-align：middle;＆＃34;在＆＃34;文本div＆＃34;它不工作。此外，当我试图申请＆＃34; margin-top＆＃34;在同一个div上，它被应用在矩形框上。

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提示的技巧将使用div对齐vertical-align。

Answer 2

此CSS代码允许您放置它而不进行转换。这对我来说是最好的解决方案：

div#member-login {
  position: relative;
}

p { /* better with an id or a class */
  position: absolute;
  top: 0px;
  bottom: 0px;
  margin: auto;
  font-size: 16px; /* it's recommended to set it */
  line-height: 16px; /* the value should be the same as the font-size or the 150% of it */
  height: 16px; /* the value should be the same as the line-height property */
}

对＆＃34; div＆＃34;的使用感到困惑在HTML中

2 个答案: