mercredi 29 juin 2016

How to centre dialog without flex or transform

Hi I'm trying to create a modal dialog. I need to centre it vertically and horizontally. Unfortunately I can't use flex or transform because this needs to work when viewed on Android 4.2.

I have found solutions that work by setting the width and height of the dialog. I can't use these methods either though because the dialog message will be variable so some times it might span multiple lines and the dialog will need to be bigger.

Anyone know how to do this?

My code example below shows what I have so far which is great apart from the fact the dialog isn't centered.

.modal {
  background: rgba(0,0,0,.6);
  top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  position:fixed;
}

.modal-dialog {
  background-color:#fff;
  display:inline-block;
  padding:1em;
  border-radius: 5px;
}

.message {
  
}
<div class="modal">
  <div class="modal-dialog">
      <p class="message">Your pin has been saved</p>
      <button>Ok</button>
  </div>
</div>

Aucun commentaire:

Enregistrer un commentaire