css - 如何使用 CSS 垂直对齐 HTML 元素

Question

请引用this image as a visual aid对于我的问题。

我希望带有“Sindre”的文本输入、其他输入和按钮放置得更高，以便它们与 Icehotel Logo 垂直对齐。我该怎么做？

这是我的代码...

HTML

<div id="header-content">
    <br>
    <a href="/index">
        <img draggable="false" src="{url}/app/tpl/skins/{skin}/images/logo.gif" style="position:relative; margin-left: 20px; &lt;div align=; color: #FA0000;margin-top: 15px;margin-left: 180px">
    </a>
    <input id="username" name="log_username" placeholder="Username" style="position:relative; margin-left: 20px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="text">
    <input id="password" name="log_password" placeholder="Password" style="position:relative;margin-left: 1px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="password">
    <a href="{url}/api.php">
        <button class="login green" name="login" style="height:34px;" type="submit">Let's go!</button>
    </a>
    <a>
        <button class="login red" style="height:34px; margin-left: 4px" type="sumbit">Forgot your password?</button>
    </a> 
</div>

CSS

pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid
}
thead {
    display: table-header-group
}
tr, img {
    page-break-inside: avoid
}
img {
    max-width: 100%!important
}
@page {
    margin: .5cm
}
p, h2, h3 {
    orphans: 3;
    widows: 3
}
h2, h3 {
    page-break-after: avoid
}

}
html {
    height: 100%
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    color: #e0eff5;
    background-attachment: fixed;
    background-color: #013448;
    background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png');
    background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -webkit-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
    background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -moz-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #2D3877 480px);
    , -ms-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
    , radial-gradient(circle farthest-side at 190px 190px, #0297c8 0, #013448 480px);
    min-height: 755px
}
i, cite, em, var, address, dfn {
    font-style: italic;
}
body {
    font-family: "Ubuntu Condensed", Arial, serif;
    font-weight: normal;
    min-height: 0;
}
#footer a {
    color: #a1b5c8;
    text-decoration: none;
    font-size: 13px;
}
body {
    font-size: 1em;
    line-height: 1.4;
}
.form__input, .form__select {
    box-shadow: inset 0 2px 0 0 #9ebecc;
    line-height: 1.2;
    padding: 5px 12px;
    width: 100%;
    font-size: 16px;
}
.button b, .new-button i {
    position: absolute;
    display: block;
    left: 2px;
    top: 3px;
    right: 2px;
    height: 9px;
    background-color: #4a9fb4;
    z-index: 0
}
.button:hover, .new-button:hover {
    background-color: #418491
}
.button:hover b, .new-button:hover i {
    background-color: #46a9bf
}
.button span, .new-button b {
    position: relative;
    z-index: 100
}
.button:active, .button-active, .new-button:active {
    left: 1px;
    top: 1px;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.4)
}
.button.dimmed {
    -ms-filter: "alpha(opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .50
}
.button.large {
    height: 100px;
    background-color: #c78800;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #5f4416
}
.button.large:hover {
    background-color: #d99b00
}
.button.large:hover b {
    background-color: #f7ce00
}
.button.large b {
    left: 4px;
    top: 4px;
    right: 4px;
    height: 48px;
    background-color: #f0bb00;
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0
}
.button.large span {
    display: block;
    font-size: 27px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    line-height: 54px
}
.button.large span.sub {
    display: block;
    font-size: 17px;
    font-weight: bold;
    line-height: 42px;
    text-transform: none
}
.button.large.not-so-large {
    height: 48px
}
.button.large.not-so-large b {
    height: 20px
}
.button.large.not-so-large span {
    text-transform: none;
    font-size: 22px;
    line-height: 46px
}
header, footer {
    width: 100%;
    background: #101016;
    background: rgba(16, 16, 22, 0.85);
    position: fixed;
    z-index: 999
}
#login-errors {
    width: 100%;
    height: 35px;
    background-color: #c00;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    line-height: 35px
}
#login-errors a {
    color: #000
}
#footer-content {
    float: left;
    margin-left: 50px
}
#footer-content.partner-logo-present {
    margin-left: 20px
}
#footer {
    width: 100%;
    min-width: 780px;
    margin-top: 19px
}
header {
    top: 0;
    min-height: 99px
}
header #border-left {
    position: absolute;
    width: 500px;
    height: 1px;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #7aa3b9
}
header #border-right {
    position: absolute;
    width: 100%;
    height: 1px;
    left: 220px;
    bottom: 0;
    border-bottom: 1px solid #7aa3b9
}
footer {
    height: 69px;
    bottom: 0;
    border-top: 1px solid #7aa3b9
}
#top-bar-triangle, #top-bar-triangle-border {
    position: absolute;
    left: 163px;
    bottom: -29px
}
#top-bar-triangle {
    font-size: 0;
    height: 0;
    line-height: 0;
    border-style: solid;
    float: left;
    margin: 0;
    border-color: #101016 transparent;
    border-color: rgba(16, 16, 22, 0.85) transparent;
    border-width: 29px 29px 0 29px
}
#top-bar-triangle-border {
    background-image: url('http://localhost/images/new_index/images/v3/top_bar_arrow_border.out.png');
    width: 58px;
    height: 29px
}
header #habbo-logo {
    position: absolute;
    width: 190px;
    height: 52px;
    background-image: url('http://localhost/app/tpl/skins/aura/images/logo.png');
    left: 32px;
    top: 27px
}
#login-form-container {
    position: relative
}
header form {
    position: relative;
    left: 239px;
    top: 0;
    width: 740px;
    height: 99px
}
#login-columns {
    position: relative
}
header form.captcha {
    height: 200px
}
header form.captcha #login-recaptcha {
    height: 103px;
    margin-top: 8px
}
#login-recaptcha .field-error, #login-recaptcha #captcha-overlay {
    display: none
}
#login-column-1 {
    position: absolute;
    left: 0;
    top: 11px;
    width: 205px;
    height: 70px
}
#login-column-2 {
    position: absolute;
    left: 214px;
    top: 11px;
    width: 134px;
    height: 70px
}
#login-column-3 {
    position: absolute;
    left: 358px;
    top: 32px;
    width: 205px;
    height: 55px
}

Answer 1

设置vertical-align: middle;在输入上删除 margin-top来自 Logo 中的内联样式 <img>标签。

虽然我在这里，但是...对这段代码进行一般清理可能是个好主意。我想提醒您避免混合使用内联样式和 CSS。此外，<br>标签可能应该替换为填充 - 换行符和内联样式仅用于设计目的，设计在 CSS 中处理。将尽可能多的设计保留在 HTML 之外将有助于您(或其他人)在以后需要时轻松地对该站点进行更改。 <img>标签的样式还包括两个 margin-left值。我会删除一个以避免混淆。最后，我想你会想要删除 <div align=;来自 <img>标签的样式。据我所知，这没有完成任何事情。

希望对您有所帮助!