html - 当其上方和下方的 div 改变大小时居中 div

Question

好的，我正在使用 Ionic Framework 并且我有两张卡片 (divs)。将卡片视为您应该选择的问题。在这些卡片之间，即使卡片的大小因文本内容而改变，我也希望“或”一词完美居中。有没有办法使用 css 使这个“或”完美居中？

Answer 1

如果你想要你的卡片位于单词 or 的上方和下方，你可以使用 flexbox 轻松地做到这一点。只需将所有三个 div 包装在一个容器中并将容器设置为 display: flex、flex-direction: column 和 align-items: center .所有这三个都将放在一个垂直列中并彼此居中。如果您愿意，可以从那里通过在容器上设置宽度来限制宽度。无论两张卡片中的文字多小或多大，“或”都会很好地居中。

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