无法在登录表单上添加圈子用户头像

我是Web开发的初学者,并且为网页制作了Signup表单。我感觉表格中确实缺少一个圆形的头像图标,如下图所示:

Login form with avatar on top in the middle

我有html和CSS代码,并且已经加载了头像图标。但是,我不知道如何像图像一样将其放置在表单的顶部中间。感谢您在此任务上的帮助和指导。 我的代码:

//the avatar appears inside the page not on top 
.avatar{


height:500px;
border-radius:50%;	
	
}	




.form-area{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:500px;
height:600px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;	
	
	
}





h1{

margin:0;
padding:0 0 20px;
font-weight:bold;
color:#ffffff;
		
}	

.form-area p {

margin:0;
padding:0;
font-weight:bold;
color:#ffffff;
		
}	

.form-area input,select{

margin-bottom:20px;
width:100%;	
	
	
}	

.form area input[type=text], .form-area input[type="password"]
{

border:none;
border-bottom:1px solid #ccc;
background-color:transparent;	
outline:none;
height:40px;
color:#ffffff;
display:16px;
	
	
}	





.form-area select{
	
margin-top:20px;
padding:10px 0;
	
	
}	


.signupbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:#4CAF50;
cursor:pointer;	
border-radius:20px;	
	
	
}	


.cancelbtn{

border:none;
height:40px;
outline:none;
color:#ffffff;
font-size:15px;
background-color:tomato;
cursor:pointer;	
border-radius:20px;	
	
	
}	



button:hover{
	
opacity:0.7;	
	
	
}	
 <div class="form-area">

 <form action="Start_page.html" class = "sign-form animate" onsubmit="return validateform()" method = "post">
 //the avatar I want to display on the form 
    <div class="imgcontainer">
      <img src="IMAGES/login.jpg" alt="Avatar" class="avatar">
    </div>
 
   <div class="container">
     <h1>Sign Up</h1>
     <p>Please fill in this form to create an account.</p>
     <hr>
	 
	 
    <label for="name" ><b><span>Name<span></b></label>
    <input type="text" placeholder="Enter Name" name="onoma" id = "myname" required>
	
	
    <label for="surname" ><b><span>Surname<span></b></label>
    <input type="text" placeholder="Enter Surname" name="epith" id = "mysurname" required>

    <label for="email" ><b><span>Email<span></b></label>
    <input type="text" placeholder="Enter Email" name="email" id = "mailID" required>

    <label for="psw"><b><span>Password</span></b></label>
    <input type="password" placeholder="Enter Password" name="psw" id = "pass" required>

 
    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn" onclick = "window.location.href='Start_page.html'">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
	
   </div>
   
 </form>

 </div>

先感谢您 。如果您有任何疑问或需要有关我的页面的更多信息,请告诉我,我将更新帖子。

评论
Out
Out

将此添加到图像:

.imgcontainer img{
    height: 100px; /* set a default height*/
    margin-top: -75px; /* move image up fo 75px */
    border: 1px solid black; /* define a border */
    border-radius: 50%; /* make the image rounded, this works only with square images*/
}

这是它的容器:

.imgcontainer{
    display: flex; /* change display */
    justify-content:center;/* align to the center the image */
    /* NOTE : there is a lot of other way to align the image to the center, you can use the one that you prefer*/
}

If this method does not do what you want in the way you want, another way is to use position: absolute, center it on center top, and than traslate it -50% top and -50% left

点赞
评论