5

以下は私が使用しているCSSです：

        .flip-container
           {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;


    }



    .flip-container:hover .flipper, .flip-container.hover .flipper {
             -webkit-transform: rotateY(180deg);
             -moz-transform: rotateY(180deg);
              transform: rotateY(180deg);
    }

    .flip-container, .front, .back {
                  width: 150px;
                  height: 150px;

    }

    .flipper {
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;
        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;
         transition: 0.6s;
         transform-style: preserve-3d;
         position: relative;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        display: table-cell;
        vertical-align:middle;

        position: absolute;
        top: 0;
        left: 0;

    }

    .front {
         z-index: 2;
         text-align: center;
    }

    .back {

        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);

    }

    .front .name {
        font-size: 2em;
        display: inline-block;
        background: rgba(33, 33, 33, 0.9);
        color: #f8f8f8;
        font-family: Courier;
        padding: 5px 10px;
        border-radius: 5px;
        bottom: 60px;
        left: 25%;
        position: absolute;
        text-shadow: 0.1em 0.1em 0.05em #333;

        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    .back-logo {
        position: absolute;
        top: 40px;
        left: 90px;
        width: 160px;
        height: 117px;
        background: url(logo.png) 0 0 no-repeat;

    }

    .back-title {
        font-weight: bold;
        color: #00304a;
        position: absolute;
        top: 180px;
        left: 0;
        right: 0;
        text-align: center;
        text-shadow: 0.1em 0.1em 0.05em #acd7e5;
        font-family: Courier;
        font-size: 2em;

    }

    .back p {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        text-align: center;
        padding: 0 20px;

    }

私が使用しているHTMLは次のようになります:

<div id="article"><div class="flip-container" ontouchstart="this.classList.toggle('.'hover'.');">
<div class="flipper">
 <div class="front">
   <!-- front content -->
  </div>
  <div class="back">
  <!-- back content -->
  <img src="" width="160" height="160" /> </div>
</div>
</div> 
</div>

article クラスの CSS は次のとおりです。

#article {
margin: 5px;
float: left; 
height: 150px;
width: 150px;}

FRONT div センターの fext を垂直方向に中央揃えにすることができません。また、動的で複数行になります。何か案は？

「display:table-cell」とともに「vertical-align:middle」を使用しようとしましたが、それは役に立たなかったか、間違った CSS ブロックに適用しただけかもしれません。

コードはjsFiddleにあります：こちら

4

1 に答える 1

6

display: table親コンテナーとdisplay: table-cell子コンテナーに使用できます。

#article {
    display:table;
    height: 150px;
    width: 150px;
    float: left; 
    text-align: center;
}

.front {
    display: table-cell;
    vertical-align:middle; 
}

フィドルのデモ: http://jsfiddle.net/uVSN6/1/

于 2013-02-27T05:09:03.643 に答える