Question

我正在尝试在css中找到一个翻转动画（我在这里找到）来工作并适合我的页面。动画现在工作正常，但是我想要包含的文字在正面和背面的中心不能正确对齐。我可以添加填充或使字体或文本更小，但有另一种方法让所有内容至少集中。

调整背面文本的较大部分，我可以在它居中时单独进行。

查看jsfiddle，你会明白我的意思。

示例：https://jsfiddle.net/glueckskind/kfhy7fh3/

  /* entire container, keeps perspective */
  .flip-container {
    perspective: 1000px;
  /* ADDED */
    margin: auto;
    padding: 0;
  }
  /* flip the panel when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
  }

  .flip-container, .front, .back {
    width: 340px;
    height: 100px;
    display: inline-block;

  }

  /* flip speed goes here */
  .flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
  /* ADDED */
    text-align: center;
  }

  /* hide back of panel during swap */
  .front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
  /* ADDED */
    font-family: 'Raleway', sans-serif; 
    font-size: 22px;

  }

  /* front panel, placed above back */
  .front {
    z-index: 2;
  /* for firefox 31 */
    transform: rotateY(0deg);
  /* ADDED */
  /* padding: 10px; makes one line ok */
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.5)
  }

  /* back, initially hidden panel */
  .back {
    transform: rotateY(180deg);
  /* ADDED */
  /* padding: 10px; makes one line ok */
    border: 1px solid rgba(0, 0, 0, 0.9);
  }

Answer 1

添加

height: auto;

到.back

https://jsfiddle.net/kfhy7fh3/2/

Answer 2

有些浏览器有默认的边距或填充，在这种情况下我只看到将边缘元素重置为0。这在很多时候发生在我身上

`<pre>
.back p {
padding: 0;
margin: 0;
}
</pre>
`

CSS Flip Animation中的文本将无法正确对齐

2 个答案: