使用 align-items center 使元素稍微低一点答案

【问题标题】：Using align-items center makes the element a little bit lower使用 align-items center 使元素稍微低一点
【发布时间】：2022-11-13 19:02:55
【问题描述】：

<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；

box-sizing：边框框；

文字大小调整：无；

}

html，正文 {

高度：100%；

背景：#f5f8fa；

字体系列：“Helvetica Neue”，宋体；

溢出：隐藏；

}

.content-home {

边距：0；

填充：0；

}

.logo-wrap-home {

填充：30px 0；

显示：弯曲；

证明内容：中心；

}

.logo 主页 {

宽度：230px；

最小高度：58px；

背景图片：url（“logourl”）；

背景尺寸：封面；

背景位置：中心；

背景重复：不重复；

}

.搜索切换{

边框：无；

背景：透明；

}

。搜索框 {

宽度：100%；

位置：相对；

}

.搜索字段{

宽度：100%；

显示：弹性；

对齐项目：居中；

}

.搜索切换{

位置：绝对；

宽度：45px；

高度：45px；

右：0；

光标：指针；

背景图片：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 45 像素 0 20 像素；

背景：白色；

请帮帮我我需要这个

【问题讨论】：

问题是什么？
元素未垂直居中
请编辑您的问题，添加有关您所面临问题的一些详细信息。

标签： html css

【解决方案1】：

我认为您需要使用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>

希望能帮助到你！

【讨论】：