Question

我遇到了一个障碍，我似乎无法克服styles.css中的困难。我正在重新创建Google主页，由于某种原因，无法使搜索栏成为页面的中心。

我尝试做margin: auto 0;，border-left: 200px;，text-align: center;，但是搜索栏不会移动（我将其放在.searchbar .search内）。

.googlelogo {
  display: block;
  margin: 0 auto;
  margin-top: 150px;
}

.nav {
  display: flex;
  justify-content: space-between;
}

.nav a {
  text-decoration: none;
  color: #696969;
}

.nav .nav-left .about,
.nav .nav-right .gmail {
  padding: 10px;
}

.searchbar .search {
  border-radius: 20px;
  height: 30px;
  width: 400px;
}

.searchbuttons {
  text-align: center;
}

.button {
  float: center;
  background-color: #f2f2f2;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
  color: #595959;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 5px;
  margin-right: 6.5px;
  margin-left: 6.5px;
}

.footer {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  background-color: #f2f2f2;
  padding: 15px;
  margin-top: 240px;
  width: 98%;
}

.footer a {
  text-decoration: none;
  color: #696969;
}

.footer .footer-left .advertising,
.footer .footer-left .business,
.footer .footer-left .howsearchworks {
  margin: 0 10px;
}

.footer .footer-right .privacy,
.footer .footer-right .terms,
.footer .footer-right .settings {
  margin: 0 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
  <title>Google</title>
</head>

<body>
  <div class='nav'>
    <div class='nav-left'>
      <a class='about' href='www.google.com/#'>About</a>
      <a class='store' href='www.google.com/#'>Store</a>
    </div>
    <div class='nav-right'>
      <a class='images' href='www.google.com/#'>Images</a>
      <a class='gmail' href='www.google.com/#'>Gmail</a>
    </div>
  </div>
  <div class='logo'>
    <img class='googlelogo' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c51f.png' alt='Google logo' height='250'>
  </div>
  <div class='searchbar'>
    <form>
      <input class='search' type='text'>
    </form>
  </div>
  <div class='searchbuttons'>
    <form>
      <button class='button' label='Google Search'>Google Search</button>
      <button class='button' label="I'm Feeling Lucky">I'm Feeling Lucky</button>
    </form>
  </div>
  <div class='footer'>
    <div class='footer-left'>
      <a class='advertising' href='www.google.com/#'>Advertising</a>
      <a class='business' href='www.google.com/#'>Business</a>
      <a class='howsearchworks' href='www.google.com/#'>How Search works</a>
    </div>
    <div class='footer-right'>
      <a class='privacy' href='www.google.com/#'>Privacy</a>
      <a class='terms' href='www.google.com/#'>Terms</a>
      <a class='settings' href='www.google.con/#'>Settings</a>
    </div>
  </div>

</html>

如何使搜索栏在屏幕上居中并对齐（格式设置为使其位于Google徽标下方和下方的两个按钮上方）？

Answer 1

添加了此

.searchbar {
  display: flex;
  justify-content: center;
  padding-bottom: 1em;
}

.googlelogo {
  display: block;
  margin: 0 auto;
  margin-top: 150px;
}

.nav {
  display: flex;
  justify-content: space-between;
}

.nav a {
  text-decoration: none;
  color: #696969;
}

.nav .nav-left .about,
.nav .nav-right .gmail {
  padding: 10px;
}

.searchbar {
  display: flex;
  justify-content: center;
  padding-bottom: 1em;
}

.searchbar .search {
  border-radius: 20px;
  height: 30px;
  width: 400px;
}

.searchbuttons {
  text-align: center;
}

.button {
  float: center;
  background-color: #f2f2f2;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
  color: #595959;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 5px;
  margin-right: 6.5px;
  margin-left: 6.5px;
}

.footer {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  background-color: #f2f2f2;
  padding: 15px;
  margin-top: 240px;
  width: 98%;
}

.footer a {
  text-decoration: none;
  color: #696969;
}

.footer .footer-left .advertising,
.footer .footer-left .business,
.footer .footer-left .howsearchworks {
  margin: 0 10px;
}

.footer .footer-right .privacy,
.footer .footer-right .terms,
.footer .footer-right .settings {
  margin: 0 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href='/styles/styles.css' text='styles/css' rel='stylesheet'>
  <title>Google</title>
</head>

<body>
  <div class='nav'>
    <div class='nav-left'>
      <a class='about' href='www.google.com/#'>About</a>
      <a class='store' href='www.google.com/#'>Store</a>
    </div>
    <div class='nav-right'>
      <a class='images' href='www.google.com/#'>Images</a>
      <a class='gmail' href='www.google.com/#'>Gmail</a>
    </div>
  </div>
  <div class='logo'>
    <img class='googlelogo' src='http://assets.stickpng.com/thumbs/580b57fcd9996e24bc43c51f.png' alt='Google logo' height='250'>
  </div>
  <div class='searchbar'>
    <form>
      <input class='search' type='text'>
    </form>
  </div>
  <div class='searchbuttons'>
    <form>
      <button class='button' label='Google Search'>Google Search</button>
      <button class='button' label="I'm Feeling Lucky">I'm Feeling Lucky</button>
    </form>
  </div>
  <div class='footer'>
    <div class='footer-left'>
      <a class='advertising' href='www.google.com/#'>Advertising</a>
      <a class='business' href='www.google.com/#'>Business</a>
      <a class='howsearchworks' href='www.google.com/#'>How Search works</a>
    </div>
    <div class='footer-right'>
      <a class='privacy' href='www.google.com/#'>Privacy</a>
      <a class='terms' href='www.google.com/#'>Terms</a>
      <a class='settings' href='www.google.con/#'>Settings</a>
    </div>
  </div>

</html>

Answer 2

 <div class='searchbar'>
    <form style="text-align: center">
      <input class='search' type='text'>
    </form>
  </div>

使文本框与图像和其他文本框对齐

2 个答案: