Устранение неполадок поиска в ответе

Question

У меня есть панель поиска в моем заголовке, которая мне нужна по горизонтали и чуть выше нижней части заголовка. Я был в состоянии добиться этого с помощью

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

Проблема, которую я имею сейчас, что, хотя он реагирует, когда вы сделать окно меньше по горизонтали, это полный беспорядок при изменении размеров окна по вертикали. Я уверен, что это потому, что я использовал margin-top: 350px; для установки вертикального положения. Я также предпочел бы не использовать гибкий дисплей, потому что он пока не поддерживается. Ниже приведен снимок экрана о том, как он выглядит нормально, и одно из того, как оно выглядит, когда представление изменено по вертикали. Также код, относящийся к нему. Если бы кто-нибудь мог помочь мне разобраться, как заставить поисковую панель реагировать вертикально, это было бы здорово!

Как это обычно:

Как это выглядит, когда вы измените размер экрана по вертикали (Searchbar позади изображений):

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 для поиска с помощью css для файла #hero input и установите родительское положение divs относительно position: relative;.

Пожалуйста, дайте мне знать, как это работает для вас.

Надеюсь, это поможет!