Centering a div when divs above and below it change sizes

Question

Okay, so I'm using the Ionic Framework and I have two cards(divs). Think of the cards as questions that you're supposed to select. Between these cards I want the word "or" to be perfectly center even when the size of the card changes due to text content. Is there a way to keep this "or" perfectly centered using css?

Answer 1

you can create another specific width div in between with margin on top and bottom and centered the Or text using margin: 0 auto or text-align: center.

Answer 2

This should work:

.div1{
width:45%;
float:left:
}
 .divmiddle{
width:10%;
float:left:
}
 .div1{
width:45%;
float:left:
}

Answer 3

You can put all three divs inside a containing div, and style it with flexbox:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

You have more information about this (and other options) in this answer.

Answer 4

If you are wanting your cards above and below the word or, you can do this easily with flexbox. Just wrap all three divs in a container and set the container to display: flex, flex-direction: column,and align-items: center. All three will be put in a vertical column and be centered with each other. From there you can limit the width by setting a width on the container if you so choose. No matter how small or big the text in the two cards get 'or' will be nice and centered between them.

$(document).ready(function() {

  $("button").click(function() {
    $.get("http://lorem.mannfolio.com/", function(data) {
      var lorem = data.split("\n\n");
      $("#card-one").html(lorem[0]);
      $("#card-two").html(lorem[1]);
    });
  });
});

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<button>Change text</button>
<div class="container">
  <div id="card-one">Lorem ipsum dolor sit amet.</div>
  <div>or</div>
  <div id="card-two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, obcaecati!</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>