居中对齐 CSS 框翻转动画 UL

Question

我有一个 CSS 3D 变换效果，我想将它对齐到页面的中心。

基本上，我用了两个div； div 的正面和背面，然后通过 jQuery 悬停时添加 class 来使用 CSS 进行转换。

所以我想将整块盒子（最终我会有大约五个盒子）对齐到中心。 我试过：

 ul, #subjectCardsContainer {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

以及 'ul' 和“#subjectCardsContainer”

我的全部代码

JSFiddle

$(document).ready(function() {
    $(".card").hover(function() {
      $(this).addClass("flip");
    });
    $(".card").mouseleave(function() {
      $(this).removeClass("flip");
   });
 });

ul, #subjectCardsContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 li {
    width: 150px;
    height: 150px;
    display: block;
    position: relative;
    list-style-type: none;
    display: inline-block;
     margin: 0px 5px;
}
    .card {
      width: 100%;
      height: 100%;
      position: absolute;
      perspective: 800px;
    }
    .card div {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition-duration: 400ms;
      transition-duration: 400ms;
      z-index: 10;
    }
    .card .front {             /*  Front of each card  */
      background: red;
      text-align: center;
    }
    .card .back {              /*  Back of each card  */
      background: blue;
      text-align: center;
      z-index: 0;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
    }
    .card.flip .front {
      -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
      z-index: 0;  }
    .card.flip .back {
      -webkit-transform: rotateY(360deg); transform: rotateY(360deg);
      z-index: 10;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subjectCardsContainer">
  <ul>
      <li>
          <div class="container">
              <div class="card">
                  <div class="front">
                      <p>Front 1</p>
                  </div>
                  <div class="back">
                      <p>Back 1</p>
                  </div>
              </div>
          </div>
      </li>
      <li>
          <div class="container">
              <div class="card">
                  <div class="front">
                      <p>Front 2</p>
                  </div>
                  <div class="back">
                      <p>Back 2</p>
                  </div>
              </div>
          </div>
      </li>
  </ul>
  </div>

Answer 1

使用 text-align:center 作为容器。

ul, #subjectCardsContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;  //added
}

FIDDLE DEMO

居中对齐 CSS 框翻转动画 UL

Centrally Align CSS Box Flip Animation UL

html

css

jquery

transform

我的全部代码