php - 无法使搜索栏在标题中居中

Question

我的标题底部有一个搜索栏，水平居中。它在我的主屏幕上看起来很完美，但是当我缩小窗口或在较小的屏幕上查看网站时，它没有响应。我不确定我没有做什么，或者我做了什么导致它没有响应。下面是与之相关的代码，任何帮助都会很棒!

搜索栏的 HTML:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
  <div>
    <label hidden="true" for="s">Search for:</label>
    <input placeholder="I want to go see lighthouses" class="text" type="text" value="I want to go see lighthouses" name="I want to go see lighthouses" id="s" onfocus="(this.value == 'I want to go see lighthouses') && (this.value = '')" onblur="(this.value == '') && (this.value = 'I want to go see lighthouses')" />
    <input hidden="true" type="submit" class="submit" name="Submit" value="Search!" />
  </div>
</form>

header 的 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 {
  margin-left: 31%;
  margin-top: 20%;
  margin-bottom: 15%;
  margin-right: 31%;
  shadow: 4px 7px 4px #000000;
}

#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

一种方法是在您的 CSS 中使用 flexbox。

我建议删除所有边距百分比，因为它们在不同的屏幕尺寸上看起来总是不同的。

在您的#searchform div css 中，我会将其更改为:

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

这将使它居中，您可以更改上边距以使其达到您想要的高度。这也将使它保持居中响应。

这是一个展示工作示例的 fiddle :

http://jsfiddle.net/9dkoggq3/

我添加了一个容器并将其设为浅灰色，以便您可以看到内容居中的容器。