![](/img/trans.png)
[英]How do I center <img /> <h1>…</h1> <img /> HTML + CSS?
[英]How to place an img element on to of a H1 tag on html using css
我一直在嘗試將圖像放在容器內,以便將其放置在 h1 標簽的文本之上,但它只是在其旁邊添加圖像,我希望圖像位於文本之上,我應該怎么做做?:
const Login = () => {
return(
<div className="login-container">
<form className='log' >
<img className='img'
src={logo}
alt="logo"/>
<hi> Hello there</hi>
<input placeholder="enter email"/>
<input placeholder="password"/>
<button type="submit">Submit</button>
</form>
</div>
)
}
這是我的 css 文件,它具有我的登錄組件文件的樣式:
.login-container {
width: 600px;
height: 500px;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 350px ;
display: flex;
border: 7px solid grey;
background-color: white;
border-radius: 10px;
align-items: center;
justify-content: center;
}
.log{
text-align: center;
columns: 170px;
position: relative;
display: block;
margin-left: 190px;
margin-right: 180px;
width: 200px;
height: 170px;
border: 10px solid rgb(140, 128, 168);
border-radius: 10px;
align-items: center;
justify-content: center;
}
input{
margin-top: 30px;
text-align: center;
border-radius: 30px;
}
h1 {
font-family: Lato, sans-serif;
color-scheme: blue;
display: block;
}
img {
width: 20px;
height: 20px;
border-radius: 30px;
margin-left: 60px;
}
<h1>
不是<hi>
的拼寫錯誤。<div>
標簽滿足您提到的在文本頂部顯示圖像的要求const Login = () => {
return(
<div className="login-container">
<form className='log'>
<div>
<img className='img'
src={logo}
alt="logo"/>
</div>
<div>
<h1> Hello there</h1>
<input placeholder="enter email"/>
<input placeholder="password"/>
<button type="submit">Submit</button>
<div>
</form>
</div>
)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.