Question

alignment fail

我想对齐这些，以便登录和注册与大括号的中心垂直对齐，并且所有内容（输入框/标签除外）在屏幕上都是水平的。

这是我的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>

和相应的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;
}

目标： enter image description here

Answer 1

首先，我会将您的HTML重新编排成方框。例如，我会将您的<a href>用于登录链接，并将相应的<img>放入单独的div中;并为注册<a href>和<img>执行相同的操作。将这些标记放入自己的框中将允许您绝对定位登录链接，并将登录链接移动到您想要的位置，内部包含div的范围。不确定您希望页面的其余部分如何定位，您能否澄清一下？

使用CSS和HTML水平对齐图像和表单

1 个答案: