반응 형 웹 사이트의 가운데 버튼

Question

반응 형 웹 사이트가 있습니다. 두 개의 버튼이있는 페이지 중 하나에서 페이지 크기가 작아 질 때 두 버튼에 모두 맞을만큼 화면 크기가 넓 으면 서로 옆에 있습니다 (예 : 스마트 폰의 경우) 두 번째 버튼 (오른쪽)이 첫 번째 버튼 아래로 이동합니다. 이것은 잘 작동합니다.

그러나 단추가 왼쪽 위의 다른 단추보다 위에 놓이면 단추를 가운데에 배치하고 싶습니다.

나는이에 기반 한 : 여기

https://jsfiddle.net/kg2grant/ 코드입니다 : http://jsfiddle.net/erenyener/puA72/2/ 다음

은 JS 바이올린입니다

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 : 플로트를 사용 https://jsfiddle.net/o1gpcLcr/

Answer 2

여백 자동을 수행하려면 float left 속성을 제거해야합니다. 또는 당신이 원하는 목적지는 휴식 : (768px 분 폭)

.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; 
} 

그런 다음 플로트 @ 미디어와 함께 큰 화면에 남아 않습니다.

Answer 3

은 부유 요소는 내용의 정기적 인 흐름에서 제거 되었기 때문에 마진 자동 이상하게 작동합니다. 마지막 두 CSS 규칙에서 float: left을 제거하고 margin: auto을 선언하면 올바르게 작동합니다.

또는, float: left을 제거 할 수 있습니다, 다음 .button-래퍼 규칙에

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

를 추가합니다. flexbox를 사용하면 여백 자동과 동일한 효과가 있지만 나중에 다른 변경 사항과 추가 사항을 쉽게 개발할 수 있습니다. flexbox에 대해 자세히 알아 보려면 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>

:

나는 코드의 일부를 변경했습니다