[英]Using align-items center makes the element a little bit lower
<div class="content-home">
<div class="logo-wrap-home">
<div class="logo-homepage"></div>
</div>
<div class="search-wrap-home">
<form method="get" class="search-home" action="https://raihan-zidan.github.io/search">
<div class="search-box">
<div class="search-field">
<input name="q" class="search-input" autocorrect="off" autocomplete="off" autocapitalize="off" placeholder="Type to search...">
<button type="submit" class="search-toggle"></button>
</div>
</div>
<noscript>Javascript is required for the site to work</noscript>
</form>
</div>
</div>
`
CSS:`*{
填充:0;
保證金:0;
框大小:邊框框;
文本大小調整:無;
}
html,身體{
高度:100%;
背景:#f5f8fa;
字體系列:“Helvetica Neue”,宋體;
溢出:隱藏;
}
.content-home {
保證金:0;
填充:0;
}
.logo-wrap-home {
填充:30px 0;
顯示:彈性;
證明內容:居中;
}
.logo-主頁{
寬度:230px;
最小高度:58px;
背景圖像:url(“logourl”);
背景尺寸:封面;
背景位置:中心;
背景重復:不重復;
}
.search-toggle {
邊框:無;
背景:透明;
}
。搜索框 {
寬度:100%;
position:親戚;
}
.搜索字段{
寬度:100%;
顯示:彈性;
對齊項目:居中;
}
.search-toggle {
position:絕對;
寬度:45px;
高度:45px;
右:0;
cursor:指針;
背景圖像:url(“logourl”);
背景大小:18px;
背景重復:不重復;
背景位置:中心
}
.搜索輸入{
寬度:100%;
高度:44px;
大綱:0;
邊框:無;
邊界半徑:22px;
字體大小:16px;
框陰影:0 2px 4px 0 rgba(0,0,0,.08),0 0 1px 0 rgba(0,0,0,.1);
填充:0 45px 0 20px;
背景:白色;
}`
請幫助我,我需要這個
我認為您需要使用justify-content:center
將搜索框置於中心。
html, body { height: 100%; background: #f5f8fa; font-family: "Helvetica Neue", arial; overflow: hidden; }.content-home { margin: 0; padding: 0; }.logo-wrap-home { padding: 30px 0; display: flex; justify-content: center; }.logo-homepage { width: 230px; min-height: 58px; background-image: url("logourl"); background-size: cover; background-position: center; background-repeat: no-repeat; }.search-toggle { border: none; background: transparent; }.search-box { position: relative; display: flex; justify-content: center; }.search-field { display: flex; align-items: center; }.search-toggle { position: absolute; width: 45px; height: 45px; right: 0; cursor: pointer; background-image: url("logourl"); background-size: 18px; background-repeat: no-repeat; background-position: center; }.search-input { width: 100%; height: 44px; outline: 0; border: none; border-radius: 22px; font-size: 16px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.08),0 0 1px 0 rgba(0,0,0,.1); padding: 0 45px 0 20px; background: white; }
<html> <body> <div class="content-home"> <div class="logo-wrap-home"> <div class="logo-homepage"></div> </div> <div class="search-wrap-home"> <form method="get" class="search-home" action="https://raihan-zidan.github.io/search"> <div class="search-box"> <div class="search-field"> <input type="text" class="search-input" placeholder="Type to search..."/> <button type="submit" class="search-toggle"></button> </div> </div> <noscript>Javascript is required for the site to work</noscript> </form> </div> </div> </body> </html>
希望能幫助到你!
這可能對你有幫助,但你想重新創建https://raihan-zidan.github.io/的風格,所以只是 go 並了解他們是如何做的並提供他們網站的參考。
這是類似這樣的東西,不僅僅是復制粘貼,但它接近於......
劇本部分,自己試着去理解吧!
* { padding: 0; margin: 0; } html, body { height: 100%; background: #f5f8fa; font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif" }.site-wrapper { height: 100%; display: grid; place-items: center; }.content-wrap-home { transform: translateY(-50%); }.content-home { margin: 0; padding: 0; }.logo-wrap-home { padding: 30px 0; display: flex; justify-content: center; }.logo-homepage { width: 230px; min-height: 58px; background-image: url("https://dummyimage.com/230x58/b0b0b0/262626"); background-size: cover; background-position: center; background-repeat: no-repeat; }.search-toggle { border: none; background: transparent; }.search-box { position: relative; }.search-field { width: 100%; display: flex; align-items: center; }.search-toggle { position: absolute; width: 45px; height: 45px; right: 0; cursor: pointer; background-image: url("https://dummyimage.com/18x18/b0b0b0/262626"); background-size: 18px; background-repeat: no-repeat; background-position: center }.search-input { width: 100%; outline: none; border: none; border-radius: 22px; font-size: 16px; box-shadow: 0 5px 5px 0 rgba(0,0,0,.1),0 5px 5px 0 rgba(0,0,0,.1); padding: 10px 50px 10px 50px; background: white; }
<div class="site-wrapper"> <div class="content-wrap-home"> <div id="content-homepage" class="content-home"> <div class="logo-wrap-home"> <div class="logo-homepage"></div> </div> <div class="search-wrap-home"> <form method="get" class="search-home" action="#"> <div class="search-box"> <div class="search-field"> <input name="q" class="search-input" title="Search" value="Search"> <button type="submit" class="search-toggle"></button> </div> </div> </form> </div> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.