How to vertically align HTML elements with CSS - css

Question

Please refer to this image as a visual aid for my question.
I want the text input with "Sindre", the other input, and the buttons, to be placed higher, so they vertically align with the Icehotel logo. How can I do this?
Here's my code...
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; <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

Set vertical-align: middle; on the inputs and remove the margin-top from the inline styles in the logo <img> tag.
While I'm at this, though...General cleanup of this code is probably a good idea. I would like to caution you to avoid mixing inline styles and CSS. Also, the <br> tag should probably be replaced with padding - that line break and the inline styles are there only for design purposes and design is handled in CSS. Keeping as much design out of the HTML will help you (or someone else) easily make changes to this site later, if needed. The <img> tag's styles also include two margin-left values. I would remove one to avoid confusion. Lastly, I think you will want to remove <div align=; from the <img> tag's styles. As far as I know, this doesn't accomplish anything.
Hope that helps!