CODEWITHSUNDEEP
htmlcssionic-framework
Teja Nandamuri
Teja Nandamuri

Reputation: 11201

How to position ionic button using CSS

I'm trying to position a button to center of screen. But it looks like there's an offset of 20px to the button.It appears 20px vertically away from the exact center.

Here's how it looks:

enter image description here

Here's the html body:

<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>

and CSS:

  #cool-button-div {

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

}

I can position the button by calculating the exact center of screen and if I use top : 250px, it works but if I use top:50% it doesnt work.

Note: I do not want to use additional divs which act like spacer views.

Upvotes: 2

Views: 7277

Answers (1)

Arshid KV
Arshid KV

Reputation: 10037

I think vh unit will help you. Please use vh.

css:-

#cool-button-div {

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

}

Upvotes: 1

Related Questions