Fatal编程技术网
  • html/
  • 使用CSS和HTML水平对齐图像和表单

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

html css

使用CSS和HTML水平对齐图像和表单,html,css,Html,Css,我希望将这些对齐，以便登录和注册与大括号的中心垂直对齐，并且所有内容（输入框/标签除外）在屏幕上都是水平的 这是我的HTML： <body> <img src="{{ STATIC_URL}}logo.png" class='center'></br> <div style:"display:inline;"> <a href='#' title='click to login' onClick='login()'>login

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

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

首先，我会将您的HTML重新整理成方框。例如，我会将登录链接的
和相应的
放在一个单独的div中；并对注册
和
执行相同的操作。将这些标签放入它们自己的框中，您就可以完全定位登录链接，并将登录链接移动到您想要的位置，位于包含div的范围内。不确定页面其余部分的定位方式，您能澄清一下吗

哦，那是个好主意！我在问题中添加了一个截图，向您展示了一个我将要实现的完美的模型！谢谢因此，在您创建了注册和登录div之后，我会将这些div与您的
一起放入一个
，并再次使用绝对定位将括号div移动到内容中的位置。这有用吗？ 
@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;
}