Question

我页面上的所有内容都水平居中，包括我的按钮。但是 - 当我调整窗口大小时，按钮会垂直移动并离开页面。这是我的jsfiddle：http://jsfiddle.net/rjord00r/utjhyckt/

.buttons {
  text-align: center;
  margin-top: 380px;
}


.buttons button {
  padding: 8px;
  border: none;
  background-color: lightgrey;
  font-weight: 500;
  font-size: 13px;
  position: relative;
  text-align: center;
}

感谢您的帮助！

Answer 1

您的示例中有很多不必要的定位，边距和元素。为了能够达到我认为你所追求的目标，我必须改变一些事情。

请在此处查看新的EXAMPLE。

以下是这些变化的摘要： -

<强> HTML

<div class="wrapper">
  <div class="centered">
    <img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
    <form class="search-bar">
       <input type="text" class="search">
       <div id="icon">
          <img src="http://i.imgur.com/l5S4LZ2.png" />
        </div>
        </form>
    <div class="buttons">
      <button type="button">Google Search</button>
      <button type="button">I'm Feeling Lucky</button>
    </div>
  </div>
</div>

<强> CSS

.wrapper {
  display: block;
  position: relative;
  width: 100%;
  height: 750px;
}

.centered {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

.logo {
  width: 272px;
}

.search {
  width: 400px;
  height: 28px;
}

.search-bar {
  position: relative;
}

#icon img {
  position: absolute;
  height: 28px;
  width: 30px;
  right: 0px;
  top: 3px;
}

.buttons {
  text-align: center;
  margin-top: 10px;
}

注意 - 我已经删除了我没有改变的示例中的任何内容。

Answer 2

这适用于您：

.searchBox{ 
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -92px;
  margin-left: -225px;
  width: 450px;
  text-align:center;
}

.logo {
  width: 272px;
}


.search {
  width: 450px;
  height: 28px;
  margin:15px 0px;
}

.search-bar{
  position:relative;
}

#icon img {
  position: absolute;
  height: 28px;
  width: 30px;
  right: 0px;
  top: 18px;
}

input:focus {
  border-color: blue;
}

.buttons {
  text-align: center;
}

.buttons button {
  padding: 8px;
  border: none;
  background-color: lightgrey;
  font-weight: 500;
  font-size: 13px;
  position: relative;
  text-align: center;
}

<div class="searchBox">
  <div class="centered">
    <img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </div>
  <div class="search-bar">
    <form>
      <input type="text" class="search">
      <div id="icon">
        <img src="http://i.imgur.com/l5S4LZ2.png" />
      </div>
    </form>
  </div>
  <div class="buttons">
    <button type="button">Google Search</button>
    <button type="button">I'm Feeling Lucky</button>
  </div>
</div>

调整窗口大小

2 个答案: