가운데 버튼 및 텍스트 문제 HTML

onClick() 버튼을 누르면 텍스트가 표시됩니다. 내 문제는 내가 버튼을 클릭하면 텍스트가 나타날 때 버튼이 아래로 스쿠프됩니다.가운데 버튼 및 텍스트 문제 HTML

텍스트가 나타나면 버튼이 움직이지 않게 할 수있는 방법이 있습니까? 어쩌면 실제로 거기에 있지만 숨겨진 버튼을 숨겨 놓을 수 있습니까? 나도 몰라, 버튼을 눌렀을 때 움직이기를 원하지 않아.

angular.module('starter.controllers', ['ionic']) 

.controller('HomeCtrl', function($scope) { 
    $scope.flip = function() { 
     $scope.coinResult = "Heads"; 
    } 
})

<body ng-app="starter"> 
    <head> 
     <style> 
      .button-calm { 
       width: 50%; 
      } 
      .coin-result { 
       text-align: center; 
       line-height: 100px; 
      } 
      .centerItems { 
       margin-left: auto; 
       margin-right: auto; 
      } 
     </style> 
    </head> 
    <ion-content> 
     <div class="centerItems"> 
      <p class="coin-result" ng-bind="coinResult"></p> 
      <button class="button button-outline button-calm" ng-click="flip()">Flip!</button> 
     </div> 
    </ion-content> 
</body>

출처

2016-10-11 Austin Hunter

한 가지 방법은 텍스트 DIV coin-result의 높이를 수정하고 그것을 overflow-y: auto를 제공하는 것입니다. 이렇게하면 버튼이 그대로 유지됩니다. 아래

데모 :

.button-calm { 
 
    width: 50%; 
 
} 
 
.coin-result { 
 
    text-align: center; 
 
    line-height: 100px; 
 
    height: 100px; 
 
    overflow-y: auto; 
 
} 
 
.centerItems { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div class="centerItems"> 
 
    <p class="coin-result" ng-bind="coinResult">Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> 
 
    <button class="button button-outline button-calm" ng-click="flip()">Flip!</button> 
 
</div>

날이에 대한 귀하의 의견을 알려주십시오. 감사!

출처

2016-10-11 00:52:20 kukkuz

가운데 버튼 및 텍스트 문제 HTML

답변

관련 문제