ウィンドウのサイズを変更すると、ボタンが移動する

Question

ボタンを含め、ページ上のすべてのものが水平に配置されます。しかし、 - 私は私のウィンドウのサイズを変更すると、ボタンは垂直方向に移動し、ページから離れています。ここに私のjsfiddleは次のとおりです。あなたの助けのための

.buttons { 
    text-align: center; 
    margin-top: 380px; 
} 


.buttons button { 
    padding: 8px; 
    border: none; 
    background-color: lightgrey; 
    font-weight: 500; 
    font-size: 13px; 
    position: relative; 
    text-align: center; 
} 

ありがとう！

Answer 1

あなたの例には、多くの不必要な配置、余白、要素があります。あなたが思っていることを達成するためには、私はいくつかを変えなければなりませんでした。

新しいEXAMPLEをここに表示します。ここで

は、変更点の概要です： -

HTML

<div class="wrapper"> 
    <div class="centered"> 
    <img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> 
    <form class="search-bar"> 
     <input type="text" class="search"> 
     <div id="icon"> 
      <img src="http://i.imgur.com/l5S4LZ2.png" /> 
     </div> 
     </form> 
    <div class="buttons"> 
     <button type="button">Google Search</button> 
     <button type="button">I'm Feeling Lucky</button> 
    </div> 
    </div> 
</div> 

CSS

.wrapper { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 750px; 
} 

.centered { 
    position: absolute; 
    top: 25%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    text-align: center; 
} 

.logo { 
    width: 272px; 
} 

.search { 
    width: 400px; 
    height: 28px; 
} 

.search-bar { 
    position: relative; 
} 

#icon img { 
    position: absolute; 
    height: 28px; 
    width: 30px; 
    right: 0px; 
    top: 3px; 
} 

.buttons { 
    text-align: center; 
    margin-top: 10px; 
} 

NOTE - 私は例から何かそのIの避難所」を削除しましたtは変わった。

Answer 2

このあなたのために：

.searchBox{ 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -92px; 
 
    margin-left: -225px; 
 
    width: 450px; 
 
    text-align:center; 
 
} 
 

 
.logo { 
 
    width: 272px; 
 
} 
 

 

 
.search { 
 
    width: 450px; 
 
    height: 28px; 
 
    margin:15px 0px; 
 
} 
 

 
.search-bar{ 
 
    position:relative; 
 
} 
 

 
#icon img { 
 
    position: absolute; 
 
    height: 28px; 
 
    width: 30px; 
 
    right: 0px; 
 
    top: 18px; 
 
} 
 

 
input:focus { 
 
    border-color: blue; 
 
} 
 

 
.buttons { 
 
    text-align: center; 
 
} 
 

 
.buttons button { 
 
    padding: 8px; 
 
    border: none; 
 
    background-color: lightgrey; 
 
    font-weight: 500; 
 
    font-size: 13px; 
 
    position: relative; 
 
    text-align: center; 
 
}

<div class="searchBox"> 
 
    <div class="centered"> 
 
    <img class="logo" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
 
    </div> 
 
    <div class="search-bar"> 
 
    <form> 
 
     <input type="text" class="search"> 
 
     <div id="icon"> 
 
     <img src="http://i.imgur.com/l5S4LZ2.png" /> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div class="buttons"> 
 
    <button type="button">Google Search</button> 
 
    <button type="button">I'm Feeling Lucky</button> 
 
    </div> 
 
</div>