製作搜索欄響應的問題

Question

我在我的頭文件中有一個搜索欄，它需要水平居中並稍微高於頁眉底部。我能夠通過使用

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

我現在有是，儘管當你使窗口小水平很敏感，這是一個總的混亂，當你垂直調整窗口大小的問題，以實現這一目標。我很確定這是因爲我使用了margin-top：350px;設置垂直位置。我也寧願不使用柔性顯示器，因爲它還不被支持。下面是一個截圖，它看起來是否正常，以及垂直改變視圖時的樣子。還有關於它的代碼。如果有人能幫我弄清楚如何讓搜索欄垂直響應，那會很棒！

它一般操作方法是：

當你垂直改變屏幕尺寸它的外觀（搜索欄是圖像後面）：

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並與CSS等，從而div中輸入：

#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搜索框，並設置父div的位置相對與position: relative;。

請讓我知道這是如何解決你的。

希望這會有所幫助！