无法使搜索栏响应

Question

我的标题中有一个搜索栏，我需要水平居中，稍微高于标题的底部。我通过使用

实现了这一目标

  display: flex;
  justify-content: center;
  align-items: center;

我现在遇到的问题是，虽然当你使窗口水平变小时它是响应的，但是当你垂直调整窗口大小时，它总是很乱。我很确定这是因为我使用了margin-top：350px;设置垂直位置。我也不愿意使用flex展示，因为它还没有得到支持。下面是它看起来如何正常的截图，以及视图垂直变化时的外观之一。还有与之相关的代码。如果有人可以帮我弄清楚如何让搜索栏垂直响应，那就太棒了！

通常如何：

垂直更改屏幕尺寸时的外观（搜索栏位于图像后面）：

HTML：

<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?> - Return to the homepage"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></a></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>

CSS：

#searchform div {
  shadow: 4px 7px 4px #000000;
  margin-top: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#searchform .text {
  font-family: 'Merriweather';
  padding-left: 35px;
  height: 75px;
  width: 600px;
  font-size: 220%;
  color: #B7B7B7;
  border-radius: 50px;
  background: white url('images/search-img.png') no-repeat;
  background-position: 96% center;
}

#searchform .text:focus {
  background-image: none;
}

#searchform .text img {
  margin-right: 25px;
}

Answer 1

查看我为您制作的Fiddle。

我的主div有一个background-image，而div里面的输入和css一样：

#hero {
    background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 100vh;
    margin-bottom: 0px;
    right: 0;
}
#hero input {
    position: absolute;
    width: 200px;
    height: 34px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding: 5px 10px;
    border-radius: 50px;
    outline: none;
}

这样，无论浏览器如何缩放，文本框都将始终保留在图像的中心。为了使其工作，文本框必须具有定义的宽度和高度。

因此，在您的情况下，使用我对#hero input的css替换搜索框的css，并将父divs位置设置为position: relative;的相对位置。

请让我知道这对你有用。

希望这有帮助！