Bonjour,

Voilà, ça fait des heures que je cherche comment faire un truc pourtant si simple... Je cherche à faire avec bootstrap quelque chose du style :

<table style="vertical-align: middle; text-align: center;">
    <tr>
        <td rowspan="2"><img src="img1.png" /></td>
        <td><img src="img2.png" /></td>
        <td><img src="img3.png" /></td>
    </tr>
    <tr>
        <td><img src="img4.png" /></td>
        <td><img src="img5.png" /></td>
    </tr>
</table>

Voilà le code que j'obtient avec bootstrap :

<div class="row">
    <div class="col-md-4">
        <img src="img1.png" />
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-sm-6">
                <img src="img2.png" />
            </div>
            <div class="col-sm-6">
                <img src="img3.png" />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <img src="img3.png" />
            </div>
            <div class="col-sm-6">
                <img src="img4.png" />
            </div>
        </div>
    </div>
</div>

Sauf qu'avec bootstrap, mon img1 reste tout en haut

Bien sur je pourais jouer avec le line-height mais par defaut, je ne sait pas combien de px fera mon image (oui oui, elle est défini en % mon image :/ )

Si quelqu'un a une idée...

Merci d'avance

-
Edité par jam-jam68140 10 août 2015 à 17:24:45

Petit up

svp j'ai besoin de vous là... J'ai fais un code avec jquery en attendant mais ça donne des cochonstés une fois sur quatre...

-
Edité par jam-jam68140 15 août 2015 à 2:08:22

En jQuery, tu peux facilement récupérer la hauteur de ton image.

Donc dans le CSS, tu positionne en relative a top:50%. Ensuite, tu peux grâce a jquery récupérer la hauteur de l'image grâce a : var hauteurImg = $("#monImg").height;

Ensuite, tu écris ça : $("#monImg").css("margin-top" , hauteurImg/2*(-1));

Logiquement, ça marche.Après, y a peut être une méthode full css mais je vois pas...

-
Edité par Basmo 15 août 2015 à 16:04:13

Bonjour,

Est-ce que cela marche ?

img{
    position : relative;
    top: 50%;
    transform: translateY(-50%);
}

nyahor a écrit:

Bonjour,

Est-ce que cela marche ?

img{
    position : relative;
    top: 50%;
    transform: translateY(-50%);
}

Faut pas oublier les prefix

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

-
Edité par Basmo 15 août 2015 à 19:01:41

Non, ça ne veut pas fonctionner... En fait je n'ai pas compris le pourquoi de ce code de toute facon

Et puis en jquery j'ai un code un peu plus complexe mais qui reprend vaguemet l'idée

-
Edité par jam-jam68140 16 août 2015 à 1:14:24

Bonsoir,

Puis ce q'un exemple est souvent plus simple et plus claire que des explications longues :

Une méthode pour centrer verticalement un élément pour lequel on connais la hauteur est la suivant :

.block{
    position: relative;
    top: 50%;
    height: 100px;
    margin-top: -50px; // height / 2
}

Ce qui équivaut à :

.block{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Cette méthode peux donc être très utile car il n'est pas nécessaire de connaitre la hauteur de l’élément.

Après si ça marche pas le js est une solution.