CSS를 사용하여 이온 버튼을 배치하는 방법

버튼을 화면 중앙에 배치하려고합니다. 하지만 버튼에 20px의 오프셋이있는 것 같습니다. 정확한 중심에서 수직으로 20px 떨어진 곳에 나타납니다. 여기CSS를 사용하여 이온 버튼을 배치하는 방법

는 보이는 방법은 다음과 같습니다

<body ng-app="starter" class="platform-ios platform-cordova platform-webview"> 
    <ion-pane> 
     <ion-content> 
      <div id="cool-button-div"> 
      <button class="button button-block button-calm">Cool!</button> 
      </div> 
     </ion-content> 
    </ion-pane> 
    </body>

및 CSS : 나는 정확한 중심을 계산하여 버튼을 배치 할 수 있습니다

#cool-button-div { 

    position: relative; 
    width:200px; 
    margin:auto; 
    margin-top:50%; 

}

여기

는 HTML 본문입니다 화면의 top : 250px을 사용하면 작동하지만 top:50%을 사용하면 작동하지 않습니다.

참고 : 저는 스페이서보기처럼 작동하는 추가 div를 사용하고 싶지 않습니다.

출처

2016-10-17 Teja Nandamuri

난 당신이 스크린의 화면 (상하), 그리고 센터 (좌우) 중앙에 배치하려고하는 것 같아요. 권리? – Dekel

여백 : 자동으로 div를 만들었으므로 div 중심에서 보았습니다 –

[모든 브라우저에서 div를 세로로 배치하는 방법] 가능한 복제본?] (http://stackoverflow.com/questions/396145/how-to- 모든 브라우저 용 세로 중심 형) – Dekel

나는 vh 단위가 도움이 될 것이라고 생각합니다. vh을 사용하십시오.

CSS : -

#cool-button-div { 

    position: relative; 
    width:200px; 
    margin:auto; 
    margin-top:50vh; 

}

출처

2016-10-17 01:03:19

차가움. 나는 항상 추가 div를 배치하지 않으려합니다. 그것이 효과가 있지만 vh에 대한 추가 참조를 추가 할 수 있습니까? –

https://developer.mozilla.org/en-US/docs/Web/CSS/length#vh를 확인하십시오. –

빠른 응답을 보내 주셔서 감사합니다! –

CSS를 사용하여 이온 버튼을 배치하는 방법

답변

관련 문제