Question

我正在使用The Odin Project学习CSS，我制作了Google.com主页的模型。在我调整浏览器窗口大小并且元素移动到位之前，一切看起来都很完美。

我一直在尝试许多不同的方法，以便在调整页面大小时将div（Google徽标，搜索栏和按钮）置于中心位置。

#header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -125px;
  width: 300px;
  padding: 10px;
}
#topbar {
  font-family: arial, sans-serif;
}
.centered {
  width: 960px
}
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.15rem;
  background-color: #f2f2f2;
  font-family: arial, sans-serif;
  font-size: 15px;
  color: #666;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #7D7676;
}

<title>Google</title>
<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
<!-- Top bar -->

<body>
  <div id="topbar">
    <p align="right"><a href="https://mail.google.com" style="color:#7D7676;text-decoration: none">Gmail</a>&nbsp;&nbsp;<a href="https://images.google.com" style="color:#7D7676;text-decoration: none">Images</a>&nbsp;&nbsp;
      <img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png">&nbsp;</p>
  </div>
  <br>
  <!-- Google Center Image -->
  <div id="centered">
    <div id="logo">
      <img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400">
    </div>
  </div>

  <!-- Search Bar and Buttons -->
  <div id="search">
    <form id="searchbar" width="500">
      <br>
      <input type="text">
      <br>
    </form>
    <br>
    <button type="button" id="firstbutton">Google Search</button>
    <button type="button" id="secondbutton">I'm Feeling Lucky</button>
  </div>

  <!-- Footer -->
  <div class="footer">
    <p class="alignleft"><a href="https://www.google.com/intl/en/ads/" style="color:#666;text-decoration: none">&nbsp;&nbsp;Advertising</a>
      &nbsp;&nbsp;&nbsp;
      <p class="alignleft"><a href="https://www.google.com/services/" style="color:#666;text-decoration: none">Business</a>
        &nbsp;&nbsp;&nbsp;
        <p class="alignleft"><a href="https://www.google.com/intl/en/about/" style="color:#666;text-decoration: none">About</a>
        </p>
        <p class="alignright"><a href="https://www.google.com/intl/en/policies/privacy/" style="color:#666;text-decoration: none">Privacy</a>
          &nbsp;&nbsp;
          <a href="https://www.google.com/intl/en/policies/terms/" style="color:#666;text-decoration: none">Terms</a>
          &nbsp;&nbsp;
          <a href="https://www.google.com/preferences" style="color:#666;text-decoration: none">Settings&nbsp;&nbsp;</a>
        </p>
  </div>

jsFiddle

我觉得应该是这样的，但我不确定：

div {
    position: relative
    margin-left:auto;
    margin-right:auto;
}

注意：我将继续调整搜索栏和按钮的大小并添加颜色，我最关心的是在重新调整浏览器页面时找到如何将搜索栏和按钮置于Google徽标的中心。< / p>

Answer 1

您可以将属性text-align: center添加到ID为<div>的{{1}}祖先。

#search

这将使#search{ text-align: center; }和<input>元素居中，因为它们保留了<button>个特征。

＆＃13;

inline

＆＃13;

#header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -125px;
  width: 300px;
  padding: 10px;
}
#topbar {
  font-family: arial, sans-serif;
}
#search {
  text-align: center;
}
.centered {
  width: 960px
}
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.15rem;
  background-color: #f2f2f2;
  font-family: arial, sans-serif;
  font-size: 15px;
  color: #666;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #7D7676;
}

＆＃13;

Revised jsFiddle

Answer 2

<title>Google</title> <link rel="stylesheet" type="text/css" href="google-homepage-css.css">  <body> <div id="topbar"> <p align="right"><a href="https://mail.google.com" style="color:#7D7676;text-decoration: none">Gmail</a>  <a href="https://images.google.com" style="color:#7D7676;text-decoration: none">Images</a>   <img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png"> </p> </div> <br>  <div id="centered"> <div id="logo"> <img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400"> </div> </div>  <div id="search"> <form id="searchbar" width="500"> <br> <input type="text"> <br> </form> <br> <button type="button" id="firstbutton">Google Search</button> <button type="button" id="secondbutton">I'm Feeling Lucky</button> </div>  <div class="footer"> <p class="alignleft"><a href="https://www.google.com/intl/en/ads/" style="color:#666;text-decoration: none">  Advertising</a>     <p class="alignleft"><a href="https://www.google.com/services/" style="color:#666;text-decoration: none">Business</a>     <p class="alignleft"><a href="https://www.google.com/intl/en/about/" style="color:#666;text-decoration: none">About</a> </p> <p class="alignright"><a href="https://www.google.com/intl/en/policies/privacy/" style="color:#666;text-decoration: none">Privacy</a>    <a href="https://www.google.com/intl/en/policies/terms/" style="color:#666;text-decoration: none">Terms</a>    <a href="https://www.google.com/preferences" style="color:#666;text-decoration: none">Settings  </a> </p> </div>是一个块元素，默认情况下，它的父元素宽度为100％。

如果您尝试使用<div>将其居中，那么您将无法获得预期结果。您必须按要应用的边距设置宽度。

请参阅以下示例：

＆＃13;

margin: 0 auto

＆＃13;

.parent{
  width: 400px;
  height: 100px;
  border: 1px solid blue;
}

.item{
  width: 100px;
  margin: 0 auto;
  border: 1px solid green;
}

＆＃13;

如何在调整网页大小时保持div居中？

2 个答案: