使用 align-items center 使元素稍微低一点
[英]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: `* { CSS：`*{
padding: 0;填充：0；
margin: 0;保证金：0；
box-sizing: border-box;框大小：边框框；
text-size-adjust: none;文本大小调整：无；
} }
html, body { html，身体{
height: 100%;高度：100%；
background: #f5f8fa;背景：#f5f8fa；
font-family: "Helvetica Neue", arial;字体系列：“Helvetica Neue”，宋体；
overflow: hidden;溢出：隐藏；
} }
.content-home { .content-home {
margin: 0;保证金：0；
padding: 0;填充：0；
} }
.logo-wrap-home { .logo-wrap-home {
padding: 30px 0;填充：30px 0；
display: flex;显示：弹性；
justify-content: center;证明内容：居中；
} }
.logo-homepage { .logo-主页{
width: 230px;宽度：230px；
min-height: 58px;最小高度：58px；
background-image: url("logourl");背景图像：url（“logourl”）；
background-size: cover;背景尺寸：封面；
background-position: center;背景位置：中心；
background-repeat: no-repeat;背景重复：不重复；
} }
.search-toggle { .search-toggle {
border: none;边框：无；
background: transparent;背景：透明；
} }
.search-box { 。搜索框 {
width: 100%;宽度：100%；
position: relative; position：亲戚；
} }
.search-field { .搜索字段{
width: 100%;宽度：100%；
display: flex;显示：弹性；
align-items: center;对齐项目：居中；
} }
.search-toggle { .search-toggle {
position: absolute; position：绝对；
width: 45px;宽度：45px；
height: 45px;高度：45px；
right: 0;右：0；
cursor: pointer; cursor：指针；
background-image: url("logourl");背景图像：url（“logourl”）；
background-size: 18px;背景大小：18px；
background-repeat: no-repeat;背景重复：不重复；
background-position: center背景位置：中心
} }
.search-input { .搜索输入{
width: 100%;宽度：100%；
height: 44px;高度：44px；
outline: 0;大纲：0；
border: none;边框：无；
border-radius: 22px;边界半径：22px；
font-size: 16px;字体大小：16px；
box-shadow: 0 2px 4px 0 rgba(0,0,0,.08),0 0 1px 0 rgba(0,0,0,.1);框阴影：0 2px 4px 0 rgba(0,0,0,.08),0 0 1px 0 rgba(0,0,0,.1);
padding: 0 45px 0 20px;填充：0 45px 0 20px；
background: white;背景：白色；
}` }`
Please help me I need this请帮助我，我需要这个
2 个解决方案
解决方案1
0 2022-11-13 10:44:07
I think you need to use the justify-content:center to bring the search box in the center.我认为您需要使用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>
Hope it helps!希望能帮助到你！
解决方案2
0 2022-11-13 11:04:06
This may help you but you want to recreate the style of https://raihan-zidan.github.io/ so just go and learn how they do and give the reference of their website.这可能对你有帮助，但你想重新创建https://raihan-zidan.github.io/的风格，所以只是 go 并了解他们是如何做的并提供他们网站的参考。
Here's something like this, not just a copy-paste but it's close to be...这是类似这样的东西，不仅仅是复制粘贴，但它接近于......
For the script part, try to understand it by yourself!剧本部分，自己试着去理解吧！
* { 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.