Using align-items center makes the element a little bit lower-CodePudding

<div >

  <div >

    <div ></div>

  </div>

  <div >

    <form method="get"  action="https://raihan-zidan.github.io/search">

      <div >

        <div >

          <input name="q"  autocorrect="off" autocomplete="off" autocapitalize="off" placeholder="Type to search...">

          <button type="submit" ></button>

        </div>

      </div>

      <noscript>Javascript is required for the site to work</noscript>

    </form>

  </div>

</div>

CSS: `* {

padding: 0;

margin: 0;

box-sizing: border-box;

text-size-adjust: none;

}

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 {

width: 100%;

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("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;

Please help me I need this

CodePudding user response：

I think you need to use the justify-content:center to bring the search box in the 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 >
      <div >
        <div ></div>
      </div>
      <div >
        <form method="get"  action="https://raihan-zidan.github.io/search">
          <div >
            <div >
              <input type="text"  placeholder="Type to search..."/>
              <button type="submit" ></button>
            </div>
          </div>
          <noscript>Javascript is required for the site to work</noscript>
        </form>
      </div>
    </div>
</body>
</html>

Hope it helps!

CodePudding user response：

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.

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 >
  <div >
    <div id="content-homepage" >
      <div >
        <div ></div>
      </div>
      <div >
        <form method="get"  action="#">
          <div >
            <div >
              <input name="q"  title="Search" value="Search">
              <button type="submit" ></button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>