php - 无法使搜索栏响应

Question

我的页眉中有一个搜索栏，我需要将其水平居中并且略高于页眉底部。我能够通过使用

来实现这一点

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

我现在遇到的问题是，虽然当您水平缩小窗口时它是响应式的，但是当您垂直调整窗口大小时它完全是一团糟。我很确定这是因为我使用了 margin-top: 350px;设置垂直位置。我也宁愿不使用 flex display，因为它还没有得到很多支持。下面是正常情况下的屏幕截图，以及垂直更改 View 时的屏幕截图。还有与之相关的代码。如果有人能帮我弄清楚如何让搜索栏垂直响应，那就太好了!

通常是这样的:

垂直改变屏幕尺寸时的样子(搜索栏在图片后面):

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;
}

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

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

请告诉我这对您来说效果如何。

希望这对您有所帮助!