Bonjour à tous,

Je ne parviens pas à faire un centrage vertical dans mes flipbox, et ce malgrès les techniques que j'ai pu trouver sur google... J'imagine que quelque chose ne plait pas au vertical-align dans la structure des flipbox. 

Le HTML :

<div class="row">
    <div class="col-sm-3">
        <div class="flip-container">
            <div class="flipper">
                <div class="front">
                    <div class="centrage">
                        fefefefe
                    </div>
                </div>
                <div class="back">
                    <div class="centrage">
                        fefefefe
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip-container">
            <div class="flipper">
                <div class="front">
                    <div class="centrage">
                        <p class="flip-front-title">
                            fefefefe
                        </p>
                        <p class="flip-p">
                            fefefefe
                        </p>
                    </div>
                </div>
                <div class="back">
                    <div class="centrage">
                        <p class="flip-back-title">
                            fefefefe
                        </p>
                        <ul class="menu_flipcard">
                            <li><a href="#">fefefefe</a></li>
                            <li><a href="#">fefefefe</a></li>
                            <li><a href="#">fefefefe</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip-container">
            <div class="flipper">
                <div class="front-color">
                    <div class="centrage">
                        <i class="fa fa-plug"></i>
                        Espace raccordement
                    </div>
                </div>
                <div class="back">
                    <div class="centrage">
                        <p class="flip-back-title">
                            fefefefe
                        </p>
                        <ul class="menu_flipcard">
                            <li><a href="#">fefefefe</a></li>
                            <li><a href="#">fefefefe</a></li>
                            <li><a href="#">fefefefe</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="flip-container">
            <div class="flipper">
                <div class="front-image" style="background-image: url('#');">
                    <div class="centrage">
                        fefefefe
                    </div>
                </div>
                <div class="back">
                    <div class="centrage">
                        <p class="flip-back-title">
                            fefefefe
                        </p>
                        <ul class="menu_flipcard">
                            <li><a href="#">fefefefe</a></li>
                            <li><a href="#">fefefefe</a></li>
                            <li><a href="#">fefefefe</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Le CSS :

/* Container entier, dont la perspective */
.flip-container {
    width: 100%;
	perspective: 1000px;
}
    
    
    
/* Tourne le panneau quand hover */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .front-color, .front-image, .back {
	width: 100%;
}

    
    
    
/* Vitesse de rotation */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}
    
    /* technique pour rendre div carrée */
    .flipper:before{
        content: "";
        display: block;
        padding-top: 100%;
    }
    
    

/* Cache back quand recto */
.front, .front-color, .front-image, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
    
    bottom: 0;
    right: 0;
    border: 1px solid black;
}

    
    
    
/* Front devant le back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
    background: -webkit-linear-gradient(top, rgb(105, 105, 105) 11%, rgb(51, 51, 51) 55%);
    background: -o-linear-gradient(top, rgb(105, 105, 105) 11%, rgb(51, 51, 51) 55%);
    background: -ms-linear-gradient(top, rgb(105, 105, 105) 11%, rgb(51, 51, 51) 55%);
    background: -moz-linear-gradient(top, rgb(105, 105, 105) 11%, rgb(51, 51, 51) 55%);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    padding: 1vw;
}

.front-color {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
    background: -webkit-linear-gradient(top, #cc53b9 11%, #bd1ca5 55%);
    background: -o-linear-gradient(top, #cc53b9 11%, #bd1ca5 55%);
    background: -ms-linear-gradient(top, #cc53b9 11%, #bd1ca5 55%);
    background: -moz-linear-gradient(top, #cc53b9 11%, #bd1ca5 55%);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.5vw;
    font-weight: bold;
    padding: 1vw;
}

.front-image {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
    background: -webkit-linear-gradient(top, #cc53b9 11%, #bd1ca5 55%);
    background: -o-linear-gradient(top, #cc53b9 11%, #bd1ca5 55%);
    background: -ms-linear-gradient(top, #cc53b9 11%, #bd1ca5 55%);
    background: -moz-linear-gradient(top, #cc53b9 11%, #bd1ca5 55%);
    background-size: 100%;
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.5vw;
    font-weight: bold;
    padding: 1vw;
}

    
    
    
/* Back initialement invisible */
.back {
	transform: rotateY(180deg);
    background: -webkit-linear-gradient(bottom, rgb(245, 245, 245) 22%, rgb(255, 255, 255) 49%);
    background: -o-linear-gradient(bottom, rgb(245, 245, 245) 22%, rgb(255, 255, 255) 49%);
    background: -ms-linear-gradient(bottom, rgb(245, 245, 245) 22%, rgb(255, 255, 255) 49%);
    background: -moz-linear-gradient(bottom, rgb(245, 245, 245) 22%, rgb(255, 255, 255) 49%);
    padding: 1vw;
}




/* Mise en forme du contenu des cartes */
.centrage {
    display: inline-block;
    vertical-align: middle;
}

.flip-front-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}

.flip-back-title {
    color: #BD1CA5;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}

.flip-p {
    line-height: 18px;
}

.back > ul {
    line-height: 18px;
    font-size: 10px;
    margin-left: 15px;
    margin-right: 0px;
}

.back > ul > li :hover {
    color: #BD1CA5;
}

.back > ul > li:hover {
    color: #BD1CA5;
}

.back > ul > li > a {
    text-decoration: none;
    color: black;
}

La div "centrage" dans l'idée était la div à centrer dans la box "front", "back", ou encore "front-color" ou "front-image"....
J'espère que vous pourrez m'aider, merci d'avance !

PS: Si ça peut vous servir, je suis parti de ce code de flipbox : https://davidwalsh.name/css-flip

-
Edité par FlipCardFlipette 16 janvier 2018 à 9:51:12

Salut,

Si ton bloc centrage ne contient qu'une seule ligne tu peux faire ceci :

.centrage {
    width: 100%;
    text-align: center;
    font-size: 12pt;
    line-height: 100vw;
}

En gros tu centre horizontalement dans la div qui fait la largeur de ton "front" et ensuite tu lui donne une hauteur de ligne égale à celui-ci pour qu'elle soit centré verticalement.

Je ne sais pas si ça peut t'aider.

A+

-
Edité par Offkors 16 janvier 2018 à 13:10:30

Malheureusement je ne peux pas procéder comme ça car non seulement le contenu des boîtes ne se limitent pas qu'à une ligne et qu'en plus les height sont fluides...

Merci pour ta réponse !

Salut,

Tu as regardé du côté de flexbox ?

Salut,

Je viens d'éditer ça, je pense que ça va t'aider : https://jsfiddle.net/1mef1zxq/

Tiens-nous au courant !

A+

-
Edité par Offkors 17 janvier 2018 à 10:29:18

Merci à vous !

En fait je n'avais pas vu nos réponses (oublié de brancher le cable ethernet )

J'ai essayé avec flexbox, le système m'a fait peur au début mais j'ai reussi du premier coup...

Ma version : https://jsfiddle.net/dafa8767/1/

Par contre en voyant vos versions je remarque que j'ai encore beaucoup de boulot côté optimisation 

-
Edité par FlipCardFlipette 18 janvier 2018 à 9:20:49