レスポンシブウェブサイトの中央ボタン

Question

レスポンシブウェブサイトを持っていますが、2つのボタンがあるページのうち、ページサイズが小さくなったときスマートフォンの場合）、2番目のボタン（右）が最初のボタンの下に移動します。これは正常に動作します。

ただし、ボタンが左上にある場合は、中央に配置します。

私はこの上でそれをベースとしている：ここでhttp://jsfiddle.net/erenyener/puA72/2/

はJSフィドルである：ここではhttps://jsfiddle.net/kg2grant/

は、コードは次のとおりです。

HTML

<div class="button-wrapper"> 

<div class="fiftyLEFT" ><button type="submit" class="submit" value="submit" name="submit_button"><span>Search</span></button></div> 

<div class="fiftyRIGHT"><button onclick="location.href='https://google.com';" class="submit" style="font-size: 22px; width: 500px" value="show" name="show_button">Google</button></div> 

</div> 

CSS

button.submit { 
    border: none; 
    background-image: linear-gradient(-180deg, #52A1DD 50%, #53A2DE 100%); 
    border-radius: 100px; 
    max-width: 90%; 
    margin-right: 5%; 
    padding: 8px 10px; 
    font-size: 26px; 
    color: #fff; 
    line-height: 30px; 
    cursor: pointer; 
    -webkit-transition: all .15s ease-in-out; 
    -moz-transition: all .15s ease-in-out; 
    -o-transition: all .15s ease-in-out; 
    transition: all .3s ease-in-out; 
    margin-top: 10px; 
    z-index: 1; 
    position: relative; 
    } 

button.submit:hover { 
    color: #3193e9; 
    background: #fff; 
    } 

button.submit { 
    width: calc(.5px + 50vw); 
    } 

button.submit img: hover { 
    background-color: #C37500; 
    opacity:0.7 !important; 
    filter:alpha(opacity=70) !important; 
    } 

.button-wrapper 
{ 
    width:100%; 
    padding-top:10px; 
    padding-bottom:10px; 
    display:inline-block; 
    border: 3px solid black 
} 

.button-wrapper > .fiftyLEFT 
{ 
    width:50%; 
    float:left; 
    min-width:50px 
} 

.button-wrapper > .fiftyRIGHT 
{ 
    min-width:400px; 
    width:50%; 
    float:left; 
    white-space: nowrap; 
} 

margin 0 autoのようなものを試してみましたが、別のコンテナを追加しても運がなかったのです！あなたの助けを前にありがとう。

Answer 1

ディスプレイをflexに変更し、@mediaクエリを使用して目的を達成できます。必要な動作と

フォークトjsFiddle：floatを使用してhttps://jsfiddle.net/o1gpcLcr/

Answer 2

margin autoを実行するには、float leftプロパティを削除する必要があります。

.button-wrapper > .fiftyLEFT { 
    width: 50%; 
    /* float: left; */ 
    min-width: 50px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.button-wrapper > .fiftyRIGHT { 
    min-width: 400px; 
    width: 50%; 
    /* float: left; */ 
    white-space: nowrap; 
    margin-left: auto; 
    margin-right: auto; 
} 

はその後フロートは@media（最小幅：768px）で大画面に残さない、またはあなたはそれが壊れたいところはどこでも。

Answer 3

はフローティングエレメントがコンテンツの定期的な流れから削除されたため、マージン自動奇妙な動作になります。最後の2つのCSSルールからfloat: leftを削除してmargin: autoを宣言すると、それが動作するはずです。

また、あなたはfloat: leftを削除し、あなたの.buttonラッパールールに

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

を追加することができます。 flexboxを使用すると、margin autoと同じ効果が得られますが、後で開発するときに他の変更や追加が容易になる可能性があります。 フレックスボックスの詳細については、https://flexbox.ioのビデオチュートリアルをご覧ください。

Answer 4

あなたは、より多くの「モバイルファースト」のアプローチでCSSメディアクエリを使用したいと思うでしょう。

デフォルトでボタンの幅を100％にしてから、@media（最小幅：768px）{...}を使用して幅を50％に変更します。

button.submit { 
 
    border: none; 
 
    background-image: linear-gradient(-180deg, #52A1DD 50%, #53A2DE 100%); 
 
    border-radius: 100px; 
 
    padding: 8px 10px; 
 
    margin: 5px 0; 
 
    font-size: 26px; 
 
    color: #fff; 
 
    line-height: 30px; 
 
    cursor: pointer; 
 
    -webkit-transition: all .15s ease-in-out; 
 
    -moz-transition: all .15s ease-in-out; 
 
    -o-transition: all .15s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
button.submit:hover { 
 
    color: #3193e9; 
 
    background: #fff; 
 
} 
 

 
button.submit img: hover { 
 
    background-color: #C37500; 
 
    opacity:0.7 !important; 
 
    filter:alpha(opacity=70) !important; 
 
} 
 

 
.button-wrapper { 
 
    width:100%; 
 
    padding: 10px 0; 
 
    display:inline-block; 
 
    border: 3px solid black 
 
} 
 

 
button { 
 
    width: 100%; 
 
} 
 

 
@media (min-width: 768px) { 
 
    button { 
 
    float: left; 
 
    width: 50%; 
 
    white-space: nowrap; 
 
    } 
 
}

  <div class="button-wrapper"> 
 

 
      <div class="button" ><button type="submit" class="submit" value="submit" name="submit_button"><span>Search</span></button></div> 
 

 
      <div class="button"><button onclick="location.href='https://google.com';" class="submit" value="show" name="show_button">Google</button></div> 
 
      
 
      </div>

：

は、私はあなたのコードにいくつかの変更を加えました