Aligning images and forms horizontally using CSS and HTML

Question

alignment fail

I'd like to align these so that the login and signup are vertically aligned with the center of the braces, and that everything (except the input boxes/labels) is horizontal across the screen.

Here is my HTML:

 <body>
<img src="{{ STATIC_URL}}logo.png" class='center'></br>
<div style:"display:inline;">
    <a href='#' title='click to login' onClick='login()'>login</a>
    <img src="{{ STATIC_URL}}leftParens.png" style:"display:inline">
    <form method='post' action='login' id='loginForm'>
    {% csrf_token %}
        <label for="username">username</label>
        <input name="username" type="text" id="username" face="helvetica"/>
        </br>
        <label for="password">password</label>
        <input name="password" type="password" id="password" face="AmericanTypewriter"/>
    </form>
    <img src="{{ STATIC_URL}}rightParens.png" style:"display:inline">
    <a title='signup for omnicloud' href='signup' class='login_signup_button'>signup</a>
</div>
</body>

And the corresponding CSS:

@font-face{
    font-family:AmericanTypewriter;
    src:url('AmericanTypewriter.TTF');
}

body{
    background-color:rgb(71,103,255);
    text-align:center;
}

img.center{
    margin-left: auto;
    margin-right: auto;
    width:500px;
}

    /* Used for braces */
form,fieldset,h1,h2,a,label{
    margin:0;
    padding:0;
    font:30px/32px normal 'AmericanTypewriter', courier, sans-serif;
    color:#fff;
    display:inline;
}

a{
    vertical-align: 50%;
}

input{
     margin:0;
   padding:0;
   font:20px/22px normal 'AmericanTypewriter', courier, sans-serif;
   color:rgb(48,94,255);
}

    /* Used for login, signup, username, password */
#loginForm{
   display:block;
   margin:50px auto;
   height:100px;
}

The goal: enter image description here

SamStar · Accepted Answer · 2011-12-08 15:12:41Z

1

To begin with, I would rework your HTML to be arranged into boxes. For instance, I would put your <a href> for the login link and the corresponding <img> into a separate div; and do the same for the signup <a href> and <img>. Putting these tags into their own boxes would then allow you to absolutely position the login link, and move the login link to where you want it, inside the confines of the containing div. Not sure how you want the rest of your page positioned, can you clarify?

answered Dec 8, 2011 at 15:12

SamStar

3352 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chris Over a year ago

Oh that's a great idea! I've put a screenshot into the question to show you a mockup for what I'm going for

SamStar Over a year ago

Perfect! Thanks. So, after you have created your signup and login divs, I would put those divs in a <div id="content"> along with your <form>, and once again use absolute positioning to maneuver your parentheses divs into position within #content. Does that help?

Collectives™ on Stack Overflow

Aligning images and forms horizontally using CSS and HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related